🌈

gradient CSS

Buat dan pratinjau gradien CSS linear dan radial. Salin kode CSS siap pakai.

Alat Desain Berjalan lokal Tidak ada data dikirim
Gradien CSS linear radial desain
Jenis Gradien
Arah
●
Titik Warna
Output CSS

Apa itu gradient CSS?

Buat dan pratinjau gradient CSS linear dan radial. Tambahkan color stop, pilih arah, dan salin kode CSS siap pakai secara instan.

Cara Menggunakan Generator Gradien

  1. Pilih apakah Anda menginginkan gradien linear atau radial.
  2. Tambahkan atau sesuaikan stop warna hingga perpaduannya terlihat pas.
  3. Sesuaikan nilai sudut, posisi, atau sebaran pada pratinjau langsung.
  4. Salin CSS yang dihasilkan saat Anda siap menggunakannya di proyek Anda.

Alat Terkait

🎨
buat palet warna
Buat palet warna komplementer, analog, dan triadik
 🎨
color picker
Konversi warna antara HEX, RGB, HSL, dan CMYK
 ⚖️
cek kontras WCAG
Periksa rasio kontras warna WCAG AA dan AAA untuk aksesibilitas
Pahami Gradien CSS ▾
Contoh
Input Linear, 90°, stop: #6366F1 → #8B5CF6
Output background: linear-gradient(90deg, #6366F1, #8B5CF6);
Kasus Penggunaan Umum
  • Buat gradien latar belakang hero untuk halaman pemasaran
  • Uji penyesuaian sudut dan stop sebelum mengedit file CSS
  • Buat latar belakang tombol atau kartu yang rapi
  • Bagikan CSS gradien persis kepada developer tanpa konversi manual
Pertanyaan yang Sering Diajukan
Apakah saya perlu prefiks vendor seperti -webkit-linear-gradient?

Tidak — semua browser modern (Chrome, Firefox, Safari, Edge) mendukung gradien CSS tanpa prefiks. Prefiks vendor hanya diperlukan untuk browser yang sangat lama (IE 9 dan versi sebelumnya).

Bisakah saya menggunakan stop warna transparan?

Ya — gunakan warna rgba() atau hsla() dengan nilai alpha 0 untuk membuat pudaran ke transparan. Contoh: rgba(99, 102, 241, 0) memudarkan warna indigo hingga tak terlihat.

Bisakah saya menggunakan gradien ini pada teks?

Ya — salin nilai gradien dan gunakan dengan properti CSS: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Berapa jumlah maksimum stop warna?

Alat ini mendukung hingga 6 stop warna. CSS sendiri tidak memiliki batas mutlak — browser mendukung gradien dengan puluhan stop, meskipun performanya dapat bervariasi.