Generator Gradien CSS: Buat Gradien Menakjubkan untuk Situs Web Anda
Gradien CSS memungkinkan Anda membuat transisi halus antara dua atau lebih warna langsung di browser, tanpa perlu file gambar. Sejak browser memperkenalkan dukungan gradien di CSS3, gradien telah menjadi salah satu teknik visual paling populer dalam desain web.
Jenis Gradien CSS
Gradien linear. Warna bertransisi sepanjang garis lurus. Gunakan kata kunci seperti to right, to bottom, atau sudut dalam derajat.
background: linear-gradient(to right, #ff7e5f, #feb47b);
Gradien radial. Warna memancar dari titik pusat ke luar.
background: radial-gradient(circle, #ff7e5f, #feb47b);
Gradien conic. Warna bertransisi mengelilingi titik pusat dalam bentuk kerucut.
background: conic-gradient(#ff7e5f, #feb47b, #ff7e5f);
Memahami Color Stop
Color stop menentukan di mana setiap warna dimulai dan berakhir dalam gradien.
background: linear-gradient(90deg, red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
Tips untuk Gradien Indah
- Gunakan rona serupa untuk transisi yang elegan.
- Warna komplementer menciptakan gradien yang vibrant.
- Gradien tiga warna sering terlihat lebih canggih.
- Uji kontras untuk keterbacaan teks.
Hasilkan Gradien Secara Visual
Generator Gradien CSS gratis kami memungkinkan Anda membuat, melihat pratinjau, dan mengekspor gradien linear, radial, dan conic dengan antarmuka visual yang intuitif. Pilih warna di roda warna, sesuaikan stop dengan menyeret, dan salin CSS yang dihasilkan dalam satu klik.