Utilore

Generator Gradien CSS

Geser slidernya dan perhatikan panel di atas ikut berubah. Kalau tampilannya sudah pas, salin barisnya lalu tempel ke stylesheet Anda: tidak perlu apa-apa lagi.

Sudut berlaku untuk gradien linear dan konik; yang radial menyebar dari tengah.

Titik warna

    Cara pakai

    1. Pilih jenisnya: linear berjalan sepanjang satu garis, radial menyebar dari titik tengah, conic menyapu mengelilinginya.
    2. Atur sudutnya dan geser titik warna ke tempat warna-warna itu seharusnya bertemu.
    3. Tambahkan titik warna kalau dua warna belum cukup, atau tekan «Kejutkan saya».
    4. Salin baris CSS di bawah pratinjau.

    Perlu diketahui

    Kenapa pratinjaunya diletakkan di atas pola papan catur

    Gradien sering berakhir pada warna transparan, dan di atas panel putih polos hasilnya terlihat sama saja dengan warna pekat. Pola papan catur menembus di setiap bagian yang warnanya tidak solid, jadi apa yang Anda atur itulah yang Anda lihat. Kebiasaan ini dipinjam dari editor gambar justru karena alasan itu.

    Titik warna diurutkan sebelum kodenya ditulis

    CSS tidak akan mengurutkan titik warna untuk Anda: titik di 70% yang ditulis sebelum titik di 30% membuat browser menjepit titik kedua, dan gradiennya diam-diam kehilangan satu warna. Alat ini mengurutkan titik warna menurut posisinya saat menyusun barisnya, sehingga menggeser satu slider melewati tetangganya tidak pernah merusak hasilnya.

    Pertanyaan umum

    Apa beda ketiga jenis itu?

    Gradien linear berjalan sepanjang garis lurus dan menerima sudut: 90deg dari kiri ke kanan, 180deg dari atas ke bawah. Gradien radial menyebar melingkar dari titik tengah, cocok untuk efek cahaya dan sorotan. Gradien conic menyapu mengelilingi satu titik seperti jarum jam, dan dari sinilah diagram lingkaran serta roda warna dibuat.

    Bagaimana cara membuat gradien dengan transparansi?

    Pilih satu warna lalu turunkan opasitasnya di pemilih warna kalau browser Anda menyediakan kanal alfa, atau sunting sendiri baris yang sudah disalin: rgba(31, 95, 214, 0) bisa dipakai sebagai titik warna persis seperti warna solid. Pudar menuju transparan lebih berguna daripada pudar menuju putih, karena hasilnya jalan di atas latar apa pun.

    Bisakah dipakai sebagai warna teks?

    Bisa, dengan dua baris tambahan: taruh gradiennya di background-image, lalu tambahkan background-clip: text dan color: transparent. Bentuk hurufnya tetap, dan gradiennya menembus lewat huruf-huruf itu.

    Kenapa sudut yang sama terlihat berbeda pada mode radial?

    Di sana sudutnya memang tidak berlaku sama sekali. Gradien radial berangkat dari titik tengah dan tidak punya arah, jadi sudutnya tetap tersedia untuk mode linear dan conic, tempat sudut itu menentukan dari mana sapuannya dimulai.

    Alat terkait