Generator Gradien CSS

Apa itu generator gradien CSS?

Generator gradien CSS adalah editor visual untuk fungsi linear-gradient, radial-gradient, dan conic-gradient di CSS. Alat ini menghindarkanmu dari mengetik color stop dengan tangan: geser warna di sebuah lintasan, lihat preview-nya berubah, lalu salin CSS siap pakai yang bisa langsung dimasukkan ke stylesheet-mu.

Gradien ada di mana-mana dalam UI modern: bagian hero, overlay kartu, status tombol, efek cahaya, detail halus mode gelap, skeleton loading, dan border dekoratif. Tahu cara membaca dan menulis gradien dengan tangan membuatmu lebih cepat, tapi generator visual tak tertandingi untuk membuat sketsa ide.

CSS mendukung tiga jenis gradien. *Linear* berjalan di sepanjang garis lurus dengan sudut berapa pun. *Radial* memancar dari sebuah titik dalam bentuk lingkaran atau elips. *Conic* menyapu warna mengelilingi titik pusat seperti permukaan jam. Masing-masing punya kegunaannya sendiri, dan kamu bisa menggabungkan beberapa gradien dalam satu latar belakang.

Yang akan kamu pelajari saat mendesain gradien

• Gradien ditentukan oleh *arah* (atau bentuk) dan *color stop*, yaitu warna dengan posisi opsional.
• Dua color stop di posisi yang sama menghasilkan *tepi tajam*, berguna untuk garis-garis atau latar belakang yang terbelah.
• Ruang warna modern seperti oklch menghasilkan gradien yang lebih halus dan lebih seragam secara perseptual dibandingkan rgb atau hsl.
• Di CSS, gradien adalah gambar. Kamu bisa memakainya di mana saja background-image, border-image, mask-image, atau filter menerima gambar.

Cara membuat gradien CSS langkah demi langkah

1. 1

   Pilih jenis gradien

   Pilih linear untuk sapuan warna lurus, radial untuk pudar melingkar, atau conic untuk sapuan mengelilingi titik pusat.

2. 2

   Atur sudut atau posisinya

   Untuk linear, pilih sudut dalam derajat (0deg berarti dari bawah ke atas di CSS). Untuk radial dan conic, atur posisi pusatnya.

3. 3

   Tambah dan atur color stop

   Tambahkan warna sebanyak yang kamu mau. Geser setiap stop di sepanjang lintasan untuk memindahkan posisinya. Dua stop di posisi yang sama menghasilkan tepi tajam.

4. 4

   Preview di bentuk sungguhan

   Ganti antara hero selebar layar, kartu, dan tombol untuk melihat bagaimana gradien tampil di rasio aspek yang berbeda.

5. 5

   Salin CSS-nya

   Salin deklarasi background yang siap pakai lalu tempel ke stylesheet-mu.

Referensi cepat gradien CSS

Tiga fungsi gradien dan bagian-bagian di dalamnya. Referensi lengkap di MDN: linear-gradient, radial-gradient, conic-gradient.

Contoh gradien CSS untuk dicoba

.hero {  background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}

.card {  background:    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%),    #1f2230;}

.stripes {  background: repeating-linear-gradient(    45deg,    #1a1a1a 0 12px,    #2a2a2a 12px 24px  );}

Kesalahan umum saat membuat gradien CSS

• Memakai terlalu banyak color stop. Tiga atau empat biasanya cukup; lebih dari itu sering membuat hasilnya keruh.
• Lupa bahwa 0deg berarti dari bawah ke atas di gradien CSS (berbeda dari banyak tool desain yang menganggap 0° mengarah ke kanan).
• Menaruh teks di atas gradien berkontras tinggi tanpa mengecek keterbacaannya di kedua ujung. Ingat kontras WCAG.
• Menganimasikan background-image secara langsung. Kebanyakan browser tidak menginterpolasi antar gradien dengan mulus. Animasikan background-position atau pakai transisi pada variabel bersama.
• Merentangkan gradien di elemen yang sangat lebar tanpa memikirkan banding. Tambahkan stop di tengah atau pakai oklch untuk transisi yang lebih halus.

FAQ Gradien CSS