Generator Gradasi CSS
Gradient CSS adalah gambar latar. Gradasi merah ke biru dari kiri ke kanan ditulis background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%); dan gradasi melingkar putih ke hitam ditulis background: radial-gradient(circle at center, #ffffff 0%, #000000 100%);.
Cara memakai
- Pilih preset atau mulai dari bawaan, lalu pilih Linear atau Radial.
- Untuk gradient linear, atur sudut dengan slider atau kotak angka. 0 derajat mengarah ke atas, 90 ke kanan, 180 ke bawah dan 270 ke kiri. Untuk radial, pilih circle atau ellipse dan letak titik tengahnya.
- Ubah color stop: ganti warna lewat kotak warna atau kode HEX, lalu atur posisinya dari 0 sampai 100 persen. Tambahkan hingga 6 stop, hapus stop, atau tekan Jarak rata agar jaraknya sama.
- Tekan Salin CSS. Baris pertama adalah warna solid untuk browser lama, baris kedua gradasinya.
Cara menghitung
Gradient linear mencampur warna di sepanjang sebuah garis. Sudut menentukan arah garis itu dalam derajat, searah jarum jam dari atas: 0deg dari bawah ke atas, 90deg dari kiri ke kanan. Setiap color stop memasangkan warna dengan posisi di garis, dan browser membaurkan warna di antara stop yang bersebelahan.
Gradient radial mencampur warna dari titik tengah ke luar. Bentuknya lingkaran (circle) atau elips (ellipse) yang meregang mengikuti kotak, dan kata kunci seperti at top left memindahkan titik tengah. Posisi 0 persen adalah titik tengah dan 100 persen tepi terjauh.
Stop diurutkan berdasarkan posisi sebelum CSS ditulis, jadi urutan Anda mengeditnya tidak berpengaruh. Dua stop di posisi yang sama membuat batas tegas, bukan perpaduan. Posisi dibulatkan ke dua angka desimal.
Warna menerima HEX 3, 6 atau 8 digit. Bentuk 8 digit diakhiri pasangan alpha, jadi #11182700 sepenuhnya transparan. Gradasi menuju transparan ditampilkan di atas pola kotak-kotak pada pratinjau.
Contekan sudut
| Sudut | Arah | Bentuk kata kunci |
|---|---|---|
| 0deg | Bawah ke atas | to top |
| 90deg | Kiri ke kanan | to right |
| 180deg | Atas ke bawah | to bottom |
| 270deg | Kanan ke kiri | to left |
| 135deg | Kiri atas ke kanan bawah | to bottom right (kira-kira) |
Pertanyaan umum
Kenapa baris pertama berupa warna solid?
Itu cadangan untuk lingkungan yang tidak mendukung gradient. Browser yang memahami baris kedua akan memakainya, jadi baris pertama boleh dihapus kalau tidak perlu.
Apa arti 135deg?
Garis gradasi mengarah ke kanan bawah: mulai dari sudut kiri atas dan berakhir di kanan bawah. 90deg dari kiri ke kanan dan 180deg dari atas ke bawah.
Bagaimana membuat garis tegas, bukan gradasi halus?
Beri dua stop posisi yang sama. Misalnya merah di 50 persen dan biru di 50 persen menghasilkan batas tajam di tengah.
Bagaimana membuat gradasi ke transparan?
Pakai HEX 8 digit untuk stop terakhir, misalnya #11182700. Memudar ke kata kunci transparent bisa tampak keabu-abuan di browser lama seperti Safari versi lama, jadi warna yang sama dengan alpha nol lebih aman.
Apakah mendukung conic gradient?
Belum. Alat ini mencakup gradient linear dan radial.
Apakah ada yang diunggah?
Tidak. Pratinjau dan CSS dibuat di browser Anda.