CSS Gradasi Generator
Buat gradasi CSS menakjubkan dengan pratinjau waktu nyata dan kode siap pakai
Pratinjau Langsung
Kode CSS
background: linear-gradient(45deg, #ff7e5f 0%, #feb47b 100%);Pengaturan Cepat
Jenis Gradien
Warna-warna
Arah
Usage Examples
Website Headers
Perfect for hero sections and page headers
Button Backgrounds
Eye-catching buttons and call-to-actions
Card Overlays
Subtle backgrounds for cards and sections
Alat Desain Gradasi Profesional
Semua yang Anda butuhkan untuk membuat gradasi indah untuk desain web modern
Beberapa Jenis Gradasi
Buat gradasi linear, radial, konis, dan multi-stop dengan kontrol penuh
Pratinjau Waktu Nyata
Lihat gradasi Anda secara instan saat Anda mendesain dengan pembaruan pratinjau langsung
Ekspor Kode CSS
Salin kode CSS siap produksi dengan prefiks vendor untuk kompatibilitas
Pustaka Warna
Akses koleksi gradasi pra-buat dan kombinasi warna tren
Preset Gradasi
Mulai dengan preset indah dan sesuaikan sesuai kebutuhan desain Anda
Opsi Ekspor
Ekspor sebagai CSS, SVG, PNG, atau salin URL langsung untuk penggunaan segera
Salin Satu Klik
Salin CSS gradasi secara instan ke clipboard untuk implementasi cepat
Desain Responsif
Pratinjau bagaimana gradasi terlihat di berbagai ukuran layar dan perangkat
Memahami Jenis Gradasi
Pilih jenis gradasi yang tepat untuk kebutuhan desain Anda
Gradasi Linear
Warna bertransisi dalam garis lurus dari satu titik ke titik lain
Terbaik untuk:
Sempurna untuk latar belakang, tombol, dan menciptakan kedalaman
Properti:
- • Arah (sudut atau kata kunci)
- • Beberapa titik warna
- • Kontrol posisi warna
- • Transisi halus
linear-gradient(45deg, #667eea 0%, #764ba2 100%)Gradasi Radial
Warna-warna memancar keluar dari titik pusat dalam pola melingkar atau elips
Terbaik untuk:
Bagus untuk efek sorotan, bola-bola, dan titik fokus
Properti:
- • Bentuk (lingkaran atau elips)
- • Kata kunci ukuran
- • Pengendalian posisi
- • Beberapa titik berhenti warna
radial-gradient(circle, #667eea 0%, #764ba2 100%)Gradien Konik
Warna-warna bertransisi mengelilingi titik pusat, menciptakan efek seperti kerucut
Terbaik untuk:
Ideal untuk diagram lingkaran, pemintal pemuatan, dan efek artistik
Properti:
- • Sudut mulai
- • Posisi pusat
- • Efek roda warna
- • Penempatan sudut
conic-gradient(from 0deg, #667eea, #764ba2, #667eea)Praktik Terbaik Desain Gradien
Tips profesional untuk membuat gradien yang efektif dalam desain Anda
Harmoni Warna
- • Gunakan warna-warna dari keluarga warna yang sama untuk transisi yang halus
- • Hindari warna-warna dengan kontras tinggi kecuali disengaja
- • Pertimbangkan konsistensi suhu warna
- • Uji gradien di mode terang dan gelap
Kinerja
- • Gunakan gradien CSS daripada gambar jika memungkinkan
- • Batasi jumlah titik berhenti warna untuk kinerja yang lebih baik
- • Pertimbangkan warna cadangan untuk browser lama
- • Uji di perangkat seluler untuk rendering yang halus
Aksesibilitas
- • Pastikan kontras yang cukup untuk keterbacaan teks
- • Hindari gradien yang mungkin memicu kejang
- • Uji dengan alat aksesibilitas buta warna
- • Sediakan gaya alternatif untuk mode kontras tinggi
Konteks Penggunaan
- • Gunakan gradien halus untuk latar belakang
- • Gradien tebal cocok untuk tombol dan CTA
- • Pertimbangkan konten yang akan menimpa gradien
- • Sesuaikan arah gradien dengan alur konten
Gaya Tren
- • Gradien duotone untuk tampilan modern dan minimal
- • Gradien mesh untuk desain kontemporer
- • Efek glassmorphism dengan gradien halus
- • Gradien animasi untuk antarmuka dinamis
Lintas Browser
- • Sertakan awalan vendor untuk browser lama
- • Uji rendering gradien di berbagai browser
- • Sediakan cadangan warna solid
- • Gunakan pendekatan peningkatan progresif
Pertanyaan yang Sering Diajukan
Bagaimana cara membuat transisi gradien yang halus?
Gunakan warna-warna dengan nilai kecerahan dan saturasi yang serupa. Hindari lompatan antara hue yang sangat berbeda. Pertimbangkan menggunakan warna perantara sebagai titik berhenti antara warna kontras untuk menciptakan transisi yang lebih halus.
Apa perbedaan antara gradien linear dan radial?
Gradien linear mentransisikan warna dalam garis lurus (horizontal, vertikal, atau diagonal), sedangkan gradien radial memancar keluar dari titik pusat dalam pola melingkar atau elips.
Bisakah saya menggunakan gradien untuk warna teks?
Ya! Gunakan background-clip: text dan -webkit-background-clip: text dengan warna teks transparan untuk menerapkan gradien ke teks. Ini menciptakan efek teks gradien yang indah.
Bagaimana cara membuat gradien responsif?
Gradien CSS secara inheren responsif dan menyesuaikan dengan wadahnya. Anda juga dapat mengubah properti gradien menggunakan media query untuk ukuran layar yang berbeda atau menggunakan properti khusus CSS untuk pengendalian dinamis.
Apakah gradien CSS lebih baik daripada gambar gradien?
Ya, gradien CSS umumnya lebih baik karena dapat diskalakan, ringan, tidak memerlukan permintaan HTTP, dapat dimodifikasi dengan mudah, dan lebih mudah diakses daripada gambar.
Berapa banyak titik berhenti warna yang bisa saya gunakan dalam gradien?
Meskipun tidak ada batas ketat, menggunakan terlalu banyak titik berhenti warna dapat memengaruhi kinerja. Umumnya, 2-5 titik berhenti warna bekerja dengan baik untuk sebagian besar desain. Lebih banyak titik berhenti mungkin diperlukan untuk efek artistik yang kompleks.
Tetap Terupdate dengan Tren Desain
Dapatkan tren gradien terbaru, tips CSS, dan inspirasi desain yang dikirim ke kotak masuk Anda.