Generator gradasi CSS
Susun gradasi secara visual dan salin CSS-nya.
- Berjalan di browser Anda — teks Anda tidak pernah dikirim ke mana pun
- Tanpa pendaftaran, tanpa kuota, gratis dipakai sesering yang Anda mau
Cara kerjanya
Gradasi ditulis di CSS sebagai satu deklarasi yang sintaksnya mudah salah diingat, terutama konvensi sudut dan letak color stop. Melihat hasilnya sambil menyesuaikan lebih cepat daripada memuat ulang halaman untuk memeriksa.
Konvensi sudut sering menjebak orang
Di CSS, 0 derajat menunjuk ke atas dan sudut bertambah searah jarum jam, sehingga 90 derajat berjalan dari kiri ke kanan dan 180 derajat berjalan dari atas ke bawah. Ini berbeda dari konvensi matematika dan dari beberapa alat desain, itulah sebabnya gradasi yang disalin dari tempat lain sering tampak berputar.
Tiga jenis
Linear berjalan sepanjang garis lurus dan mencakup hampir semua penggunaan nyata. Radial menyebar keluar dari sebuah titik, yang cocok untuk efek cahaya dan sorotan. Conic menyapu mengelilingi pusat dan menjadi dasar pembuatan diagram lingkaran dan roda warna.
Gradasi adalah gambar, bukan warna
Ini hal lain yang menjebak orang. CSS memperlakukan gradasi sebagai gambar latar, sehingga berfungsi di background dan background-image tetapi tidak di color, border-color, atau apa pun yang mengharapkan warna polos. Gradasi teks memerlukan background-clip, yang merupakan teknik terpisah.
Menambahkan warna tengah
Dua stop menghasilkan perpaduan yang bersih. Stop ketiga memungkinkan Anda mengarahkan transisi melalui rona lain, yang menghindari abu-abu keruh yang muncul ketika dua warna berlawanan langsung berpadu.
Generator gradasi CSS — pertanyaan
Ke arah mana sudutnya?
0 derajat menunjuk ke atas dan sudut bertambah searah jarum jam, jadi 90 derajat berarti dari kiri ke kanan.
Mengapa gradasi saya tidak berfungsi pada teks?
Gradasi adalah gambar latar, bukan warna. Gradasi teks memerlukan background-clip sebagai langkah terpisah.
Kapan sebaiknya saya memakai radial atau conic?
Radial untuk efek cahaya dan sorotan, conic untuk efek diagram lingkaran dan roda warna. Linear mencakup sebagian besar kasus lainnya.