🎨 CSS Gradient Generator — Buat Gradien CSS Indah
Buat gradient CSS indah dengan color picker interaktif. Atur angle, pilih tipe linear/radial/conic, gunakan preset cantik, dan langsung copy kode CSS siap pakai.
✨ Live Preview🆓 Gratis🚫 Tanpa Login📋 Copy CSS🔒 100% Privat
💡 Gradient CSS bisa dipakai untuk background, button, header, text, border, dan overlay. Kombinasikan dengan transparency untuk efek glassmorphism. Kode CSS langsung copy-paste ke stylesheet Anda.
💻 Kode CSS
❓ Pertanyaan Umum
Linear: warna bergradasi dari satu arah ke arah lain (atas-bawah, kiri-kanan, diagonal). Radial: warna bergradasi dari titik pusat ke luar (lingkaran/elips). Conic: warna bergradasi mengelilingi titik pusat seperti diagram pie — cocok untuk efek modern.
Ya! Linear dan radial gradient didukung semua browser modern (Chrome, Firefox, Safari, Edge) sejak 2015+. Conic gradient didukung sejak 2020+. Untuk browser lama, gunakan fallback solid color.
Gunakan: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text. Teks akan memiliki efek gradient. Pastikan fallback color untuk browser yang tidak support.
📖 Cara Menggunakan Gradient Generator
1
Pilih Warna
Color picker untuk warna 1 & 2.
2
Atur Tipe
Linear, radial, atau conic.
3
Preset
Klik gradien siap pakai.
4
Salin CSS
Copy kode CSS.
💡 Tips Gradient
🎯 Text Gradient
background-clip: text + color: transparent.
📊 Animation
Animasikan background-position.
🔗 Coba Juga Tools Lain
Tools ini cocok dipadukan dengan kalkulator lainnya:
🔗 Alat Terkait yang Mungkin Anda Butuhkan
🕐 Terakhir diperbarui: 30 Mei 2026 · Dibuat oleh dwik.xyz · Syarat & Ketentuan