English
Español
Português
Français
Deutsch
Italiano
Türkçe
Bahasa IndonesiaGradien Generator
Buat gradien linear, radial dan conic dengan 2–5 warna dan sudut kustom. Pratinjau live, preset, acak (Spasi), output Tailwind plus CSS, unduh PNG. Tekan Spasi untuk mengacak.
Arah & bentuk
Pemberhentian warna (2)
Keluaran CSS
Unduh Gradien
Pilih format untuk pratinjau, lalu unduh
Apa itu generator gradien?
Transisi warna mulus, tanpa gambar
Gradien memadukan dua warna atau lebih sepanjang garis, dari pusat, atau mengelilingi titik. Browser merendernya sebagai CSS tajam yang independen resolusi, cocok untuk hero, tombol, kartu dan overlay tanpa permintaan jaringan.
Alat ini melampaui dasar 2 warna: tipe linear plus radial plus conic, hingga 5 stop dengan posisi, 8 preset, inspirasi acak, kelas arbitrary Tailwind, dan ekspor PNG.
Cara menggunakan
01
Pilih tipe dan warna
Linear, radial atau conic. Edit tiap stop dengan picker, HEX atau slider 0–100%. Tambah hingga 5, kurangi sampai 2.
02
Atur arah
Slider sudut plus preset 45° untuk linear/conic, bentuk plus posisi untuk radial. Coba preset atau Spasi untuk acak.
03
Salin dan kirim
Salin CSS atau Tailwind, unduh CSS+PNG, atau bagikan URL, stop dan sudut tersimpan dalam ?type=&angle=&stops=.
Contoh nyata
Latar hero: 135deg indigo→pink
Sapuan diagonal 2 warna tetap terbaca di bawah teks putih dan terkompres jadi satu baris CSS. Mulai dari preset Indigo Pink.
Tombol dan CTA: 90deg 3-stop
Triple gaya sunset menambah kedalaman pada elemen kecil. Jaga stop tengah dekat 50% agar campuran merata pada status hover.
Cahaya dan sorotan: radial
Elips radial di atas menciptakan aurora lembut di balik kartu. Padukan dengan permukaan gelap untuk overlay yang aman kontras.
Cincin progres: conic
Sapuan conic dari sudut cocok untuk pie chart dan loader. Dua stop dengan posisi keras memberi cincin tersegmen.
Pengiriman Tailwind
Salin kelas arbitrary bg-[linear-gradient(...)] langsung ke markup, atau simpan cuplikan config untuk pemakaian berulang.
Gambar sosial dan OG
Unduh snapshot PNG 1200×630 untuk sampul, thumbnail dan placeholder tanpa membuka alat desain.
Gradien animasi dan teks gradien
Pakai ulang output mana pun: animasikan background-position untuk latar shimmer, atau padukan dengan background-clip:text untuk headline gradien. Salin CSS dan tambah dua keyframe.