CSS Gradient Generator Gratis
Tool generator background gradasi warna CSS & HTML online. Buat kombinasi kode warna linear, radial, dan conic gradient transparan lalu ekspor kodenya secara instan.
Kode CSS Result
Ciptakan Visual Tanpa Batas 🎨
Mengapa membebani website dengan file gambar berukuran besar jika Anda bisa menciptakan background yang jauh lebih indah dan ringan hanya dengan beberapa baris kode CSS?
Dukungan Alpha (RGBA)
Bukan sekadar menggabungkan warna solid. Tool ini memungkinkan Anda mengatur level transparansi (Opacity) pada setiap warna untuk efek overlay yang menyatu (blending).
Conic & Radial Modern
Tinggalkan batasan linear lama. Ciptakan efek pendaran cahaya dari tengah layar (Radial) atau efek pusaran kerucut layaknya diagram pie (Conic Gradient) terbaru.
Multi Export (CSS & PNG)
Membutuhkan gradasi ini untuk desain di Canva atau Figma? Selain menyalin kode CSS untuk website, Anda juga langsung bisa mengunduh hasilnya sebagai gambar PNG resolusi tinggi.
Cara Membuat Background Gradasi HTML
Pilih Tipe Gradasi
Tentukan bentuk dasar gradasi di kolom kiri: Linear (garis menyamping/vertikal), Radial (menyebar dari titik tengah), atau Conic (berputar).
Atur Palet Warna
Klik kotak warna untuk memunculkan Color Picker. Tambahkan warna baru sebanyak yang Anda suka. Atur posisi pertemuannya dengan menggeser angka persentase (Pos).
Mainkan Transparansi
Ingin membuat warna memudar? Turunkan nilai slider Op (Opacity). Angka 0% berarti sepenuhnya transparan. Tampilan kanvas checkerboard (papan catur) akan membuktikannya.
Salin Kode CSS-nya
Lihat layar hitam di kanan bawah. Itulah kode CSS3 murni Anda yang otomatis di-generate. Klik tombol "Salin" dan tempelkan di file style.css Anda.
Panduan Tipe CSS Background Gradient
Sejak rilisnya CSS3, desainer tidak perlu lagi bergantung pada aplikasi Photoshop hanya untuk membuat latar belakang yang menarik. Pahami tiga tipe fungsi gradasi utama (Gradient Functions) yang didukung penuh oleh browser modern saat ini:
| Tipe Fungsi CSS3 | Karakteristik & Arah Visual | Penggunaan Terbaik (Use Case) |
|---|---|---|
linear-gradient() |
Transisi warna mengalir mengikuti satu garis lurus (Kiri-Kanan, Atas-Bawah, atau sudut derajat spesifik seperti 45deg). | Background layar utama (Hero Section), warna pada tombol (Button), overlay gelap pada gambar Header. |
radial-gradient() |
Warna memancar dari satu titik pusat ke arah luar secara melingkar (Elliptical atau Circle). | Memberikan fokus (vignette) pada elemen di tengah layar, efek cahaya matahari, latar belakang popup modal. |
conic-gradient() |
Warna berputar mengelilingi titik pusat (disapu melingkar layaknya jarum jam dari 0 hingga 360 derajat). | Membuat bagan diagram lingkaran (Pie Chart), efek roda warna (Color Wheel), latar belakang bergaya ilusi optik pusaran. |
Pertanyaan Umum (FAQ)
Ya. Kode CSS yang dihasilkan menggunakan sintaks standar (W3C CSS Image Values) yang didukung secara *native* oleh seluruh browser populer modern saat ini seperti Google Chrome, Mozilla Firefox, Safari (Apple), Microsoft Edge, dan Opera, baik di versi desktop maupun mobile.
Jawabannya adalah Performa (Page Speed). Gambar JPG/PNG beresolusi tinggi membutuhkan puluhan hingga ratusan Kilobytes data untuk diunduh (HTTP Request), yang memperlambat website Anda. Sebaliknya, CSS Gradient hanya berupa teks kode berukuran beberapa *Bytes* yang dirender secara matematis oleh GPU browser perangkat dalam hitungan milidetik, tanpa pecah (lossless) di layar resolusi berapapun.
Sangat mudah. Anda cukup menyalin kodenya, lalu menempelkannya ke file .css Anda, tepat di dalam blok *class* atau *id* elemen HTML yang ingin Anda warnai.
Contoh penerapan:.header-saya { width: 100%; height: 500px; /* Paste kode Anda di bawah ini */ background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); }
Seberapa sering Anda menggunakan generator gradasi ini?
Bagikan alat UI/UX ajaib ini ke rekan Frontend Developer Anda!
Posting Komentar