Cara menggunakan Generator gradien & bayangan CSS
- 1
Pilih gradien atau bayangan kotak
Beralih antara kedua editor lewat tab di atas pratinjau.
- 2
Mulai dari preset
Klik kotak preset untuk memuatnya, atau biarkan bawaan dan sesuaikan dari sana.
- 3
Atur secara visual
Seret titik warna dan atur sudut, atau tambahkan lapisan bayangan lalu setel offset, blur, dan spread.
- 4
Salin kodenya
Salin deklarasi CSS atau kelas Tailwind, lalu tempel ke proyek Anda.
Batas dan Pro
Gratis tanpa daftar: titik warna dan lapisan bayangan tanpa batas, 3 jenis gradien, 3 ruang pencampuran warna, dan 24 preset.
Pro menghilangkan iklan; kedua editor tetap lengkap di setiap paket. Lihat Pro
Tentang Generator gradien & bayangan CSS
Gradien dan bayangan adalah dua efek CSS yang paling sering diutak-atik lewat coba-coba di dev tools browser. Generator ini menyediakan editor visual untuk keduanya, lengkap dengan pratinjau langsung berukuran besar, lalu menuliskan deklarasi CSS yang tepat beserta kelas Tailwind arbitrary-value yang sesuai, misalnya bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)], sehingga hasilnya bisa langsung ditempel ke stylesheet atau className.
Editor gradien membuat gradien linear, radial, dan konik. Klik bilah titik warna untuk menambahkan warna di posisi yang diklik, seret titik untuk memindahkannya atau gunakan tombol panah untuk posisi yang presisi, dan beri setiap titik opasitasnya sendiri. Gradien linear dan konik memakai sudut, gradien radial dan konik memakai titik pusat, gradien radial bisa berbentuk lingkaran atau elips, dan semuanya bisa diulang untuk membuat garis-garis dan cincin. Anda juga bisa memilih ruang warna untuk pencampuran: OKLab dan OKLCH menghindari bagian tengah yang kelabu dan keruh seperti pada pencampuran sRGB klasik di antara warna-warna jenuh, dan didukung oleh semua browser terbaru.
Editor bayangan kotak menumpuk lapisan sebanyak yang Anda perlukan. Setiap lapisan punya offset X dan Y, blur, spread, warna dengan opasitas, sakelar inset, dan tombol tampil/sembunyi. Urutan lapisan bisa diubah, karena lapisan pertama digambar paling atas. Kotak pratinjau dengan ukuran, radius sudut, dan warna yang bisa diatur menampilkan efeknya di permukaan terang atau gelap.
Dua belas preset untuk setiap editor — senja, roda warna, dan garis-garis; elevasi Material, bayangan lembut berlapis, neumorphism, dan offset tegas — menjadi titik awal Anda. Alat ini hanya mencakup gradien dan bayangan kotak; text-shadow, filter: drop-shadow, dan gradien SVG tidak dihasilkan.
Privasi
Semuanya berlangsung di halaman: warna dan pengaturan tidak pernah meninggalkan browser Anda dan tidak ada gambar yang diunggah. Gradien dan bayangan Anda saat ini disimpan di penyimpanan lokal, jadi tetap ada saat Anda kembali.
Fitur
Linear, radial, dan konik
Titik warna yang bisa diseret dengan opasitas, sudut, pusat, bentuk, dan mode berulang.
Bayangan multilapisan
Tumpuk, urutkan ulang, sembunyikan, dan beri inset pada lapisan bayangan untuk kedalaman yang realistis.
CSS dan Tailwind
Salin deklarasi siap pakai atau kelas Tailwind arbitrary-value.