Generator gradient CSS

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.