CSS Gradient Generator

Tentang alat ini

Generator Gradien CSS membuat gradien multicolor yang halus yang dapat langsung ditempelkan ke CSS Anda. Mendukung gradien linear (terarah) dan radial (melingkar) dengan jumlah titik warna tak terbatas.

Titik warna mendefinisikan di mana setiap warna dimulai dan berakhir sepanjang sumbu gradien. Slider sudut memutar gradien linear dari 0° hingga 360°.

Cara penggunaan

1. Pilih jenis gradien: Linear atau Radial.
2. Untuk gradien linear, seret slider sudut untuk mengatur arah.
3. Klik sampel warna untuk mengubahnya dan seret slider untuk menyesuaikan posisi.
4. Klik + Tambah titik untuk menambahkan lebih banyak. Klik ✕ untuk menghapus.
5. Klik Salin untuk menyalin deklarasi CSS background.

Kasus penggunaan

Desainer web membuat latar belakang bagian hero dengan gradien CSS alih-alih gambar. Tim merek menghasilkan palet gradien yang sesuai dengan panduan warna perusahaan. Pengembang membuat prototipe kartu, tombol, dan overlay.

Pertanyaan umum

• Apa perbedaan antara gradien linear dan radial? — Gradien linear mentransisikan warna di sepanjang garis lurus pada sudut tertentu. Gradien radial memancarkan warna ke luar dari titik pusat.
• Bisakah saya menggunakan lebih dari dua warna? — Ya. Klik + Tambah titik untuk menambahkan titik warna sebanyak yang dibutuhkan.
• Apakah CSS yang dihasilkan kompatibel lintas browser? — Ya. Fungsi linear-gradient() dan radial-gradient() sepenuhnya didukung di semua browser modern tanpa prefiks vendor.