CodeKitHubApa Itu Alat Ini?
Gradien CSS adalah gambar yang dihasilkan browser dari daftar warna, bukan file yang Anda unggah — linear-gradient() membuat transisi warna sepanjang garis lurus pada sudut tertentu, sementara radial-gradient() membuat transisi warna ke luar dari titik pusat. Keduanya menerima dua atau lebih color stop, masing-masing bisa opsional dipasang pada posisi tertentu di sepanjang gradien.
Ditulis secara manual, gradien mudah salah secara halus: urutan stop yang salah, persentase yang hilang, atau nilai sudut ke arah yang salah (sudut CSS berjalan searah jarum jam dari 'to top', berbeda dari sudut matematika). Alat ini menyingkirkan sintaks dari jalan Anda — atur warna dan posisi dengan pemilih dan slider, lihat kotak pratinjau diperbarui secara real time, dan salin CSS hasilnya setelah terlihat pas.
Sumber: CSS Images Module Level 3, W3C — spesifikasi yang mendefinisikan sintaks linear-gradient() dan radial-gradient().
Mengapa Menggunakannya?
- Pratinjau langsung diperbarui seketika di setiap perubahan warna, posisi, dan sudut — tidak perlu memuat ulang halaman untuk melihat hasilnya.
- Beralih antara gradien linear dan radial dengan satu klik; kontrol sudut otomatis tersembunyi untuk gradien radial, di mana kontrol itu tidak berlaku.
- Tambah atau hapus color stop (2 hingga 4) alih-alih dibatasi pada gradien dua warna tetap.
- Setiap stop punya slider posisinya sendiri, sehingga stop tidak harus berjarak sama rata.
- Menghasilkan CSS siap tempel menggunakan sintaks standar linear-gradient()/radial-gradient().
- Berjalan sepenuhnya di browser Anda — tidak ada yang Anda konfigurasi yang diunggah ke mana pun. Gratis, tanpa pendaftaran, berfungsi di ponsel.
Cara Menggunakan
- Pilih Linear atau Radial sebagai jenis gradien.
- Untuk gradien linear, geser slider sudut — 90deg dari kiri ke kanan, 180deg dari atas ke bawah, dan seterusnya.
- Atur warna dan posisi untuk tiap stop; stop pertama adalah warna awal gradien, stop terakhir adalah warna akhirnya.
- Klik '+ Tambah stop' untuk menambah hingga total 4 stop demi gradien multi-warna, atau tombol ✕ untuk menghapus satu (minimum 2).
- Salin CSS yang dihasilkan dan tempelkan ke deklarasi background atau background-image.
Contoh
Input
Linear · Angle: 90deg · Stops: #f97316 at 0%, #ec4899 at 100%Output
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Gradien dari kiri ke kanan oranye ke merah muda — gaya umum untuk tombol, banner, dan latar hero.
Gradien linear vs. radial
Gradien linear membuat transisi warna sepanjang garis lurus, dikendalikan oleh sudut — berguna untuk banner, tombol, dan latar berarah. Gradien radial membuat transisi warna ke luar dari titik pusat dalam cincin yang meluas, cocok untuk efek sorotan, badge, atau latar bergaya glow. Alat ini secara default membuat gradien radial berbentuk lingkaran yang berpusat di kotak, mencakup kasus penggunaan radial yang paling umum; CSS juga mendukung bentuk elips dan posisi tidak di tengah jika Anda perlu menyunting hasilnya lebih lanjut secara manual.
Pola gradien umum
- Aksen merek yang halus: dua warna yang berdekatan (misalnya dua nuansa warna yang sama) pada sudut landai untuk sapuan latar yang lembut.
- Tombol CTA kontras tinggi: dua warna jenuh yang saling melengkapi pada 90deg atau 135deg untuk tampilan berani dan mengundang klik.
- Overlay pada gambar: gradien dari transparan ke warna solid (atur opasitas lewat warna rgba di hex dasar pemilih, atau sesuaikan setelah menyalin) diletakkan di atas background-image.
- Gradien pelangi/merek multi-stop: 3-4 stop yang tersebar di seluruh rentang 0-100%, untuk transisi yang lebih halus dan bertahap dibanding gradien dua warna.
- Sorotan radial: stop pusat terang di dekat 0% memudar ke stop tepi yang lebih gelap di dekat 100%, berguna untuk bagian hero atau sorotan kartu.
Memadukan dengan alat CSS lain
Gradien sering dikombinasikan dengan sudut membulat dan bayangan pada elemen yang sama — kartu bergradien dengan box-shadow lembut dan sudut membulat adalah pola UI yang umum. Buat setiap bagian secara terpisah lalu gabungkan deklarasi CSS-nya pada elemen tersebut.
→ Generator Box Shadow · Generator Border Radius · Color Picker
Pertanyaan yang Sering Diajukan
Apa perbedaan antara linear-gradient() dan radial-gradient()?
linear-gradient() membuat transisi warna sepanjang garis lurus pada sudut tertentu. radial-gradient() membuat transisi warna ke luar dari titik pusat dalam bentuk yang meluas (lingkaran atau elips). Keduanya menerima jenis daftar color stop yang sama, dipisahkan koma; hanya bentuk transisinya yang berbeda.
Bagaimana cara kerja sudut gradien CSS?
Sudut gradien CSS berjalan searah jarum jam mulai dari 'to top' (0deg menunjuk ke atas). 90deg menunjuk ke kanan, 180deg ke bawah, dan 270deg ke kiri — kebalikan dari konvensi sudut matematika standar, yang sering membingungkan saat menulis gradien secara manual.
Bisakah saya memakai lebih dari 4 color stop?
Bisa — gradien CSS menerima jumlah color stop yang dipisahkan koma berapa pun. Alat ini membatasi pembuat interaktif hingga 4 agar antarmuka tetap mudah dikelola, tapi Anda bisa menyalin CSS yang dihasilkan lalu menambahkan sendiri entri 'warna posisi%' yang dipisahkan koma di stylesheet Anda.
Mengapa gradien saya terlihat berpita alih-alih halus?
Pita biasanya muncul dari warna yang terlalu jauh nuansanya dengan terlalu sedikit stop di antaranya, atau dari presisi warna browser itu sendiri yang terbatas pada kontras sangat rendah. Menambahkan stop perantara dengan warna campuran, atau memilih warna yang lebih berdekatan nuansanya, umumnya menghasilkan tampilan yang lebih halus.
Bisakah saya menganimasikan gradien CSS?
Tidak secara langsung — gradien tidak dapat dianimasikan secara native seperti background-position atau transform, karena browser tidak bisa melakukan interpolasi antara dua definisi gradien yang sembarang. Solusi umum meliputi menganimasikan background-position pada gradien yang dibuat lebih besar dari ukurannya, atau mentransisikan background-color jika hanya satu warna yang berubah.