Konverter Gratis

Generator Gradien CSS

Buat gradien CSS secara visual dengan pratinjau langsung. Buat gradien linier, radial, dan konik dengan color stop kustom — gratis dan sisi klien.

Pratinjau Langsung
Output CSS
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Sudut (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

Tentang alat ini

Buat gradien linier dan radial CSS yang indah dengan editor visual. Pilih warna, sesuaikan perhentian, ubah arah atau sudut, dan lihat pembaruan pratinjau langsung secara real-time. Salin kode CSS yang dihasilkan — termasuk awalan vendor untuk browser lama — dan tempelkan langsung ke stylesheet Anda.

Cara menggunakan

  1. Pilih jenis gradien: linier atau radial.
  2. Tambahkan penghentian warna dengan mengeklik bilah gradien dan memilih warna.
  3. Sesuaikan sudut gradien (linier) atau posisi (radial) menggunakan kontrol.
  4. Salin kode CSS yang dihasilkan dari panel keluaran.

Pertanyaan yang sering diajukan

Apakah gradien CSS berfungsi di semua browser?
Gradien CSS modern (gradien linier, gradien radial) didukung di semua browser saat ini termasuk Chrome, Firefox, Safari, dan Edge. Alat ini secara opsional dapat menghasilkan awalan -webkit- untuk versi browser yang lebih lama.
Bisakah saya membuat gradien multi-warna?
Ya. Tambahkan perhentian warna sebanyak yang Anda perlukan. Anda juga dapat menyesuaikan posisi setiap pemberhentian untuk mengontrol perpaduan warna. Hal ini memungkinkan adanya gradien pelangi, matahari terbenam, atau gradien merek khusus yang kompleks.
Apa perbedaan antara gradien linier dan radial?
Gradien linier mentransisikan warna sepanjang garis lurus (atas ke bawah, kiri ke kanan, diagonal, atau sudut mana pun). Gradien radial mentransisikan warna keluar dari titik pusat dalam bentuk lingkaran atau elips.
Bisakah saya menggunakan gradien sebagai latar belakang teks?
Ya. Gunakan background-clip: text dengan -webkit-text-fill-color: transparan untuk menerapkan gradien pada teks. CSS yang dihasilkan memberikan definisi gradien — gabungkan dengan properti ini untuk teks gradien.