CSS gradient generator
Dengan CSS gradient generator ini Anda memilih jenis, arah, dan warna gradasi. Atur setiap color stop dengan pemilih warna dan penggeser, tambahkan yang baru lewat “+ Color stop”. Alat ini menulis gradien sebagai CSS yang ringkas dan valid serta menambahkan warna latar cadangan (background-color) agar teks tetap terbaca meski gradien tidak tampil.
Cara menghitung
Tiga jenis gradien
| Fungsi | Perubahan warna | Bawaan (jika tidak diisi) |
|---|---|---|
linear-gradient() | sepanjang garis lurus pada sudut yang dipilih | 180deg = dari atas ke bawah |
radial-gradient() | dari pusat ke arah luar | elips, di tengah, sampai sudut terjauh |
conic-gradient() | mengelilingi pusat, seperti diagram lingkaran | searah jarum jam dari 0deg (atas) |
Pada gradien linear, sudut menentukan arah: 0deg ke atas, 90deg ke kanan, 180deg ke bawah. Opsi “Ulangi” menghasilkan repeating-linear-gradient() dan sejenisnya: pola di antara stop pertama dan terakhir diulang – cocok untuk motif garis-garis.
Color stop dan posisi yang tidak diisi
Posisi bersifat opsional. Jika tidak diisi, berlaku spesifikasi W3C (CSS Images, “Coloring the Gradient Line”): stop pertama berada di 0%, stop terakhir di 100%, dan stop tanpa posisi di antaranya dibagi rata. Jika sebuah posisi lebih kecil dari posisi sebelumnya, posisi itu disamakan – begitulah tepi tajam terbentuk. Dua posisi berturut-turut (red 0% 50%) membentuk pita warna solid. Tabel menunjukkan posisi yang benar-benar dipakai browser untuk setiap stop.
Mengapa perlu warna cadangan?
Gradien adalah gambar. Jika gambar tidak digambar – misalnya dalam mode warna paksa atau karena salah ketik pada nilai – yang tersisa hanya background-color. Generator ini memakai rata-rata warna yang dibobot menurut luas area yang ditempati setiap warna.
Contoh linear-gradient(90deg, #3B82F6 0%, #9333EA 100%): setiap warna menempati separuh garis. Merah (59 + 147) ÷ 2 = 103, hijau (130 + 51) ÷ 2 = 90,5 ≈ 91, biru (246 + 234) ÷ 2 = 240 – warna cadangannya #675BF0. Periksa kontras teks Anda terhadap warna ini serta bagian gradien yang paling terang dan paling gelap.
Pertanyaan umum
Bagaimana cara membuat gradient di CSS?
Gunakan background-image: linear-gradient(90deg, #3B82F6, #9333EA); – atau properti singkat background. Tambahkan background-color sebelumnya sebagai cadangan. Generator ini memberikan kedua baris siap salin.
Bagaimana membuat tepi tajam, bukan gradasi halus?
Beri dua stop posisi yang sama, mis. red 50%, blue 50%, atau beri satu warna dua posisi: red 0% 50%, blue 50% 100%. Untuk motif garis-garis, aktifkan “Ulangi”.
Apakah conic-gradient berfungsi di semua browser?
Di semua browser modern, ya (Chrome dan Edge sejak versi 69, Firefox sejak 83, Safari sejak 12.1). Di browser yang sangat lama, warna cadangan mencegah area menjadi kosong.
Bisakah memakai warna transparan?
Ya. Masukkan stop sebagai rgba() atau nilai HEX 8 digit, mis. rgba(0, 0, 0, 0.5). Pratinjau menampilkan transparansi di atas pola kotak-kotak. Warna cadangan selalu solid.
Sumber dan dasar hukum
- css-images-3, § 3.1: W3C – CSS Images Module Level 3: Linear Gradients
- css-images-3, § 3.2: W3C – CSS Images Module Level 3: Radial Gradients
- css-images-3, § 3.4.1: W3C – CSS Images Module Level 3: Gradient Color-Stops
- css-images-4, § 3.3: W3C – CSS Images Module Level 4: Conic Gradients
- MDN Web Docs – linear-gradient()
- MDN Web Docs – radial-gradient()
- MDN Web Docs – conic-gradient()
Diperbarui:
Alat terkait
- CSS box shadow generatorBuat box shadow CSS dengan slider: beberapa lapisan, offset, blur, spread, warna dengan alfa, inset dan preset – pratinjau langsung dan salin CSS sekali klik.
- CSS border radius generatorBuat sudut membulat CSS dengan slider: semua sudut sekaligus atau satu per satu, px atau %, sintaks elips 8 nilai – kode terpendek, pratinjau langsung, salin.
- Generator palet warnaBuat kombinasi warna serasi dari satu warna dasar: komplementer, analog, triadik, persegi, split-komplementer atau monokrom – lengkap dengan HEX, RGB dan HSL.
- Konversi warna: HEX, RGB, HSL, HSV, CMYKKonversi kode warna: HEX ke RGB, RGB ke HEX, HSL, HSV, HWB, dan CMYK. Masukkan warna dalam format apa pun atau pilih dari color picker, lalu salin hasilnya.
- Cek dan hitung check digit dengan algoritma LuhnValidasi nomor dengan algoritma Luhn (mod 10, ISO/IEC 7812-1) atau hitung check digit-nya – hanya cek format, berjalan sepenuhnya di browser Anda.
- Base64 decode dan encode onlineBase64 decode dan encode online, termasuk Base64url dengan UTF-8 yang benar, serta URL encode/decode (percent-encoding). Pesan error jelas, berjalan di browser.