Gradient Generator

Buat gradien linear, radial, atau conic, tambahkan color stops dan tentukan arahnya, lalu salin kode CSS dalam sekali klik.

Jenis gradien
Color stops
CSS
Sesuaikan titik stop dan arah untuk membentuk gradien Anda.

Setiap gradien dirender langsung di browser Anda. Tidak ada pengaturan yang Anda buat di sini yang diunggah ke BroBroGo.

Tanya Jawab

Apa perbedaan antara gradien linear, radial, dan conic?

Gradien linear memadukan warna di sepanjang garis lurus yang arahnya ditentukan oleh sudut. Gradien radial menyebarkan warna keluar dari titik pusat dalam bentuk lingkaran atau elips. Gradien conic menyapu warna di sekitar titik pusat seperti roda warna.

Apa yang dimaksud dengan color stops?

Setiap color stop adalah warna yang dipatok pada posisi tertentu di sepanjang alur gradien — 0% di titik awal, 100% di titik akhir. Geser titik stop untuk memindahkan area puncak warna tersebut, atau tambahkan lebih banyak stop untuk perpaduan warna yang lebih kaya. Anda dapat menggunakan hingga delapan stop.

Bagaimana cara mengontrol arah gradien?

Untuk gradien linear atau conic, slider sudut menentukan arah alur warna — 0° mengarah ke atas, 90° mengarah ke kanan. Gradien radial tidak memiliki sudut; sebagai gantinya, pilih bentuk lingkaran (circle) atau elips (ellipse) untuk mengubah cara penyebaran warnanya.

CSS Cubic Bezier GeneratorGeser kedua handle untuk membentuk kurva easing, saksikan pergerakan titik animasi dibanding gerakan konstan, lalu salin nilai cubic-bezier().Box Shadow GeneratorGeser slider untuk membentuk box-shadow, tumpuk beberapa lapisan untuk efek kedalaman, dan salin kode CSS instan.Border Radius GeneratorBulatkan setiap sudut dengan slider, buat bentuk blob organik dengan mode elips, dan salin CSS secara instan.Flexbox GeneratorAtur kontainer flex dan item di dalamnya dengan kontrol visual, lihat perubahan tata letak secara langsung, dan salin kode CSS dalam sekali klik.CSS Grid GeneratorAtur kolom dan baris Anda, seret kursor melewati sel untuk menempatkan item, lalu salin kode CSS grid beserta HTML yang cocok dalam sekali klik.Kalkulator CSS clamp()Masukkan ukuran untuk layar kecil dan besar, lalu dapatkan nilai clamp() dinamis yang berskala mulus di antaranya — cocok untuk ukuran font, padding, margin, atau gap.Konverter WarnaKonversi warna antara HEX, RGB, HSL, HSV, CMYK, dan LAB — cukup edit satu kolom dan kolom lainnya akan langsung menyesuaikan.CSS Beautifier & MinifierRapikan kembali CSS yang berantakan agar mudah dibaca, atau minify untuk memperkecil ukurannya — lengkap dengan mode aman yang tidak akan mengubah urutan aturan Anda.Pemeriksa KontrasMasukkan warna teks dan latar belakang untuk melihat rasio kontras WCAG serta tingkat kelulusan AA dan AAA.