Generator Gradien CSS
Buat gradien CSS
Cara menggunakan Generator Gradien CSS
Buat gradien CSS Alat online gratis, tanpa pendaftaran, tanpa iklan mengganggu. Gunakan sekarang.
Kapan menggunakan CSS gradient?
CSS gradient membuat transisi warna yang halus langsung di browser tanpa memuat file gambar — memungkinkan efek visual yang kaya tanpa permintaan HTTP tambahan, mempercepat loading halaman dan meningkatkan Core Web Vitals yang kini menjadi faktor ranking Google.
- Latar belakang seksi hero: Gradient full-width di landing page menciptakan dampak visual tanpa gambar berat. Gradient linear dari warna primer ke sekunder brand langsung membangun identitas visual yang kuat di atas fold halaman.
- Styling tombol: Menambahkan background gradient pada tombol call-to-action memberikan kedalaman dan bobot visual:
background: linear-gradient(135deg, #FF6B35, #F7931E)menciptakan gradient diagonal yang hangat — populer untuk tombol CTA di landing page bisnis Indonesia. - Gradient teks: Terapkan gradient pada teks menggunakan
background-clip: textdan-webkit-text-fill-color: transparentuntuk heading yang mencolok — teknik visual yang sering digunakan di website startup dan SaaS modern. - Overlay gambar: Gradient semi-transparan di atas gambar (transparan ke hitam) meningkatkan keterbacaan teks yang ditumpuk tanpa sepenuhnya memblokir gambar latar — teknik umum dalam desain kartu dan banner promosi.
- Progress bar dan visualisasi data: Pengisian gradient pada progress bar dan elemen grafik membuat data lebih menarik secara visual — berguna untuk dashboard dan laporan bisnis interaktif.
Jenis gradient: Gunakan linear-gradient(arah, warna1, warna2) untuk gradient arah. radial-gradient(bentuk, warna1, warna2) untuk gradient lingkaran/elips. conic-gradient(warna1, warna2) untuk gradient berputar seperti diagram lingkaran (CSS4 — didukung semua browser modern).
Frequently Asked Questions
Apa perbedaan linear, radial, dan conic gradient?
Gradient linear bertransisi sepanjang garis lurus (dari atas ke bawah, kiri ke kanan, sudut apa pun). Gradient radial memancar keluar dari titik pusat secara lingkaran atau elips. Gradient conic berputar mengelilingi titik pusat — tampak seperti roda warna atau diagram pie. Masing-masing menghasilkan efek visual yang sangat berbeda.
Bagaimana cara membuat gradient yang berulang?
Gunakan repeating-linear-gradient() atau repeating-radial-gradient(). Tentukan gradient dengan panjang yang terdefinisi: repeating-linear-gradient(45deg, merah 0px, merah 10px, biru 10px, biru 20px) membuat garis diagonal bergantian — efek yang populer untuk pola latar belakang dekoratif.
Bisakah CSS gradient dianimasikan?
Gradient sendiri tidak dapat di-transisi langsung dalam CSS — background-image tidak animatable secara langsung. Solusi alternatif: gunakan background-position dengan background-size yang besar untuk menciptakan animasi pergerakan, atau gunakan CSS custom properties untuk warna dan transisikan variabel tersebut.
Apa arti sudut dalam linear-gradient?
Sudut dalam linear-gradient diukur searah jarum jam dari atas. 0deg berarti ke atas (bawah ke atas). 90deg berarti ke kanan (kiri ke kanan). 180deg berarti ke bawah (atas ke bawah). 45deg berarti diagonal ke kanan bawah. Kata kunci arah juga dapat digunakan: to top, to bottom, to right, to bottom right, dll.
Bagaimana membuat gradient dengan beberapa color stop?
Tambahkan nilai warna yang dipisahkan koma: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ffd700 100%). Persentase menentukan posisi kemunculan setiap warna. Tanpa persentase, titik didistribusikan merata. Menempatkan color stop bersamaan menciptakan tepi keras alih-alih transisi halus — berguna untuk efek stripe.
CSS gradient vs SVG gradient vs gambar gradient
CSS gradient tidak memerlukan file eksternal, sepenuhnya dapat diskalakan, dan mudah dianimasikan — pilihan utama untuk latar belakang dan efek UI sederhana. SVG gradient dapat diterapkan pada shape dan path SVG — lebih fleksibel untuk grafik vektor kompleks. Gambar gradient (PNG, JPG) diperlukan untuk efek yang sangat kompleks yang tidak dapat direproduksi dalam CSS. Untuk latar belakang web dan elemen UI, CSS gradient selalu harus diutamakan dari gambar karena alasan performa — tidak ada HTTP request, ukuran file nol, rendering lebih cepat.