Buat gradasi CSS menakjubkan dengan pratinjau waktu nyata dan kode siap pakai
background: linear-gradient(45deg, #ff7e5f 0%, #feb47b 100%);Perfect for hero sections and page headers
Eye-catching buttons and call-to-actions
Subtle backgrounds for cards and sections
Semua yang Anda butuhkan untuk membuat gradasi indah untuk desain web modern
Buat gradasi linear, radial, konis, dan multi-stop dengan kontrol penuh
Lihat gradasi Anda secara instan saat Anda mendesain dengan pembaruan pratinjau langsung
Salin kode CSS siap produksi dengan prefiks vendor untuk kompatibilitas
Akses koleksi gradasi pra-buat dan kombinasi warna tren
Mulai dengan preset indah dan sesuaikan sesuai kebutuhan desain Anda
Ekspor sebagai CSS, SVG, PNG, atau salin URL langsung untuk penggunaan segera
Salin CSS gradasi secara instan ke clipboard untuk implementasi cepat
Pratinjau bagaimana gradasi terlihat di berbagai ukuran layar dan perangkat
Pilih jenis gradasi yang tepat untuk kebutuhan desain Anda
Warna bertransisi dalam garis lurus dari satu titik ke titik lain
Sempurna untuk latar belakang, tombol, dan menciptakan kedalaman
linear-gradient(45deg, #667eea 0%, #764ba2 100%)Warna-warna memancar keluar dari titik pusat dalam pola melingkar atau elips
Bagus untuk efek sorotan, bola-bola, dan titik fokus
radial-gradient(circle, #667eea 0%, #764ba2 100%)Warna-warna bertransisi mengelilingi titik pusat, menciptakan efek seperti kerucut
Ideal untuk diagram lingkaran, pemintal pemuatan, dan efek artistik
conic-gradient(from 0deg, #667eea, #764ba2, #667eea)Tips profesional untuk membuat gradien yang efektif dalam desain Anda
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.
Gradien linear mentransisikan warna dalam garis lurus (horizontal, vertikal, atau diagonal), sedangkan gradien radial memancar keluar dari titik pusat dalam pola melingkar atau elips.
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.
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.
Ya, gradien CSS umumnya lebih baik karena dapat diskalakan, ringan, tidak memerlukan permintaan HTTP, dapat dimodifikasi dengan mudah, dan lebih mudah diakses daripada gambar.
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.
Jelajahi lebih banyak alat desain dan warna