Desain gradasi CSS secara visual: buat gradasi linear atau radial dengan sudut dan stop warna, pratinjau langsung, lalu salin kodenya.
Semua proses terjadi secara lokal di browser Anda. Tidak ada yang meninggalkan perangkat Anda.
Gradasi CSS adalah gambar yang dibuat browser saat render: tanpa file, tanpa permintaan, tidak bergantung resolusi. Tiga sintaksis standar hampir memenuhi semua kebutuhan visual, dan semuanya memakai pola stop warna yang sama: daftar pasangan warna posisi% yang diinterpolasi browser satu sama lain.
| Fungsi | Bentuk transisi | Pemakaian umum |
|---|---|---|
linear-gradient() | Warna bercampur di sepanjang garis lurus bersudut | Latar, tombol, header, pengisian teks |
radial-gradient() | Warna bercampur dari titik pusat ke luar dalam lingkaran/elips | Efek glow, vinjeta, sorot cahaya lembut |
conic-gradient() | Warna berputar di sekitar pusat seperti roda | Spinner, diagrama pie, UI roda warna |
Gradasi linear mencampurkan warna di sepanjang garis lurus dengan sudut (90° dari kiri ke kanan, 0° dari bawah ke atas). Gradasi radial bercampur dari titik pusat ke luar dalam lingkaran atau elips. Gradasi konik menyapu warna di sekitar titik pusat seperti roda warna — sempurna untuk spinner dan diagrama pie. Alat ini menghasilkan linear dan radial; sintaksis konik mengikuti pola stop yang sama.
Sudut diukur searah jarum jam dari tepi bawah: 0° mengarah ke atas, 90° ke kanan, 180° ke bawah, dan 270° ke kiri. Jadi default 90° adalah percampuran klasik dari kiri ke kanan. Anda juga bisa memakai kata kunci seperti to right atau to top left alih-alih angka.
Stop warna adalah satu warna beserta posisinya di sepanjang gradasi, dinyatakan sebagai persentase dari 0% (awal) hingga 100% (akhir). Browser menginterpolasi mulus antar stop yang berurutan. Dua stop di 0% dan 100% menghasilkan percampuran merata; menambah stop di 50% memaksa warna tengah jatuh persis di pertengahan.
Ya, untuk sintaksis standar linear-gradient() dan radial-gradient() semua browser modern — Chrome, Firefox, Safari, Edge — merendernya identik. Gradasi termasuk fitur CSS paling stabil dan tidak lagi butuh prefix vendor. Alat ini hanya menghasilkan sintaksis standar.
Tidak untuk warna secara langsung — background-image tidak bisa dianimasikan. Trik yang umum adalah membuat elemen gradasi lebih besar dari kontainernya lalu menganimasikan background-position, atau cross-fade dua lapisan gradasi dengan opacity. CSS yang Anda salin di sini adalah satu gradasi statis, yang menjadi dasar semua trik tersebut.
Akan menyusun komponen utuh setelah ini? Atur tata letaknya dengan Generator CSS Flexbox atau Generator CSS Grid, beri kedalaman dengan Generator Box Shadow, dan haluskan sudutnya di Generator Border Radius.
Jika Anda baru saja memakai Generator gradient CSS, langkah berikutnya yang wajar adalah Pembuat palet warna, Konverter warna, Pemeriksa kontras warna, atau telusuri semua alat Alat file privat.