Free CSS Gradient Generator

Buat kombinasi gradient yang menarik dan siap pakai.

Pilih dua atau tiga warna, atur sudut dan color stop, lalu salin hasilnya sebagai CSS, CSS Variables, Tailwind, atau JSON.

Custom Gradient

Gradient generator

Edit warna dan pengaturan untuk mendapatkan gradient yang sesuai kebutuhan.

°

Gunakan untuk gradient yang lebih dinamis.

0%
100%

CSS Output

Gradient code 

background: linear-gradient(135deg, #E56B10 0%, #845EC2 100%);

Gradient Inspiration

Popular gradient combinations

Pilih gradient populer untuk langsung digunakan atau dimodifikasi melalui generator.

Linear gradient

Cocok untuk background website, tombol, card, banner, presentasi, dan elemen antarmuka.

Radial gradient

Cocok untuk spotlight, hero background, efek glow, ilustrasi abstrak, dan visual yang terpusat.

Shareable gradient

Pengaturan gradient disimpan pada URL sehingga hasilnya dapat dibagikan dan dibuka kembali.

About Gradient Generator

Gradient generator gratis untuk desainer dan developer

HawaiColor Gradient Generator adalah alat gratis untuk membuat kombinasi warna gradient secara mudah. Pengguna dapat memilih linear gradient atau radial gradient, memasukkan dua hingga tiga warna, mengatur sudut, serta menentukan color stop.

Hasil gradient dapat disalin sebagai kode CSS, CSS Variables, Tailwind CSS, maupun JSON. Fitur ini membantu proses desain website, aplikasi, landing page, social media, presentasi, dan kebutuhan branding.

HawaiColor juga menyediakan koleksi popular gradients dalam kategori sunset, ocean, nature, pastel, neon, corporate, dan dark gradient.

Cara membuat CSS gradient

  1. 1

    Pilih linear gradient atau radial gradient.

  2. 2

    Masukkan dua warna atau aktifkan warna ketiga untuk kombinasi yang lebih kaya.

  3. 3

    Atur angle dan color stop sambil melihat perubahan pada preview secara langsung.

  4. 4

    Salin kode CSS, CSS Variables, Tailwind, atau JSON untuk digunakan dalam project.