Handytool
PengembangGratisBerjalan secara lokal

Generator gradient CSS

Bangun gradient CSS linear, radial, dan kerucut — seret stop, pilih warna, salin CSS.

Pratinjau
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
Tipe
Preset

Tambahkan hingga enam stop warna, seret slider posisi, dan salin CSS.

Tentang Generator gradient CSS

Generator gradient CSS Handytool membangun gradient linear, radial, dan kerucut dengan hingga enam stop warna. Seret posisi stop, ubah warnanya, beralih jenis gradient, dan pratinjau langsung serta deklarasi CSS diperbarui secara instan. Mulai dari salah satu preset built-in — Lime Swiss, Sunset, Sky, Aurora — atau desain milik Anda sendiri dari awal.

Fitur Generator gradient CSS

  • 01

    Linear, radial, dan kerucut

    Linear adalah gradient latar belakang sehari-hari; radial bagus untuk highlight dan vignette; kerucut sempurna untuk pie chart, color wheel, dan background yang berputar.

  • 02

    Hingga enam stop warna

    Tambahkan dan hapus stop, atur posisi setiap satu dengan slider, dan pilih warnanya melalui picker warna sistem atau nilai hex. Stop disortir ulang secara otomatis berdasarkan posisi.

  • 03

    Deklarasi CSS yang dapat disalin

    Output adalah deklarasi background: ... lengkap yang dapat Anda tempel langsung ke stylesheet, styled component, atau kelas Tailwind arbitrary-value.

FAQ Generator gradient CSS

Apa perbedaan antara linear, radial, dan kerucut?
Gradient linear berjalan dalam garis lurus pada sudut tertentu; gradient radial menyebar keluar dari pusat; gradient kerucut menyapu di sekitar titik seperti jarum jam. Masing-masing cocok untuk efek visual yang berbeda.
Berapa banyak stop warna yang harus saya gunakan?
Dua stop adalah gradient dua warna klasik. Tiga atau empat memungkinkan Anda membuat transisi realistis (sunset, aurora). Lebih dari enam cenderung terlihat bising — itulah mengapa generator ini membatasi hingga enam.
Bisakah saya menggunakan ini untuk latar belakang dalam templat email?
Sebagian besar klien email masih tidak mendukung gradient CSS modern dengan andal — sediakan warna fallback solid sebagai tambahan untuk gradient latar belakang jika Anda menyalin ini ke templat email.
Apakah output akurat pixel?
Ya — pratinjau dirender oleh mesin gradient asli browser, jadi apa yang Anda lihat adalah apa yang akan dihasilkan CSS Anda.

Alat terkait

Pengembang →

Jelajahi alat lain

Semua alat →