Generator gradien CSS
Pilih warna, atur posisi setiap titik warna, dan sesuaikan sudutnya. Pratinjau dan kode CSS langsung berubah, siap ditempel ke stylesheet Anda.
Berjalan di browser Anda: apa pun yang Anda ketik tidak dikirim ke mana pun.
Cara menggunakan
- Pilih Linear atau Radial.
- Untuk gradien linear, atur sudutnya.
- Tentukan warna dan posisi setiap titik. Tambah titik warna menambah warna, maksimal lima, dan Hapus membuangnya.
- Klik Salin dan tempel aturannya ke CSS Anda.
Arti hasilnya
Nilai default-nya background: linear-gradient(90deg, #ff7a18 0%, #af002d 100%);: dari oranye di tepi kiri ke merah tua di kanan. Setiap pasangan adalah warna dan titik di mana warna itu tercapai penuh. Di antara dua titik, browser mencampur warnanya.
Contoh
Tiga titik, #ff7a18 di 0%, #ffffff di 50%, dan #af002d di 100%, menghasilkan gradien yang melewati putih di tengah: linear-gradient(90deg, #ff7a18 0%, #ffffff 50%, #af002d 100%).
Tips
- Taruh dua titik di posisi yang sama untuk mendapat batas tegas, bukan transisi.
- Warna dicampur dalam sRGB, jadi di antara dua warna komplementer bagian tengahnya bisa tampak keabu-abuan; tambahkan titik di tengah untuk mengendalikannya.
- Cek kontras teks di atas gradien pada kedua ujungnya.
Pertanyaan umum
Bagaimana cara mengubah arah gradien?
Untuk gradien linear, geser pengatur sudut. 0° mengarah dari bawah ke atas, 90° dari kiri ke kanan, 180° dari atas ke bawah, dan 270° dari kanan ke kiri.
Berapa banyak warna yang bisa dipakai?
Dua sampai lima titik warna. Setiap titik punya posisi 0 sampai 100% di sepanjang garis gradien, dan alat ini mengurutkannya di dalam CSS.
Apakah kodenya berjalan di semua browser?
linear-gradient() dan radial-gradient() didukung semua browser modern tanpa prefix. Gradien radial dari alat ini berbentuk lingkaran di tengah kotak.
Bisa dipakai untuk teks atau border?
Bisa: hasilnya adalah nilai gradien biasa dalam aturan background. Pakai dengan background-image, dengan border-image, atau dengan background-clip: text untuk teks bergradasi.