🌈

gradient CSS

Buat gradien CSS linear dan radial secara visual. Tambahkan titik warna, sesuaikan posisi, atur sudut, dan salin CSS siap pakai dengan sekali klik.

Alat Generator Berjalan lokal Tidak ada data dikirim
Gradien CSSgradien lineargradien radialtitik warna
Jenis Gradien
Sudut
Titik Warna
Pratinjau
Output CSS
background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);

Apa itu gradient CSS?

gradient CSS adalah alat visual untuk membuat gradien linear dan radial CSS. Anda menambahkan titik warna, mengatur posisinya pada skala 0—00%, memilih sudut untuk gradien linear, dan melihat hasilnya secara langsung. Properti CSS akhir siap ditempel ke stylesheet mana pun.

Cara Menggunakan gradient CSS

  1. Pilih jenis gradien Linear atau Radial.
  2. Untuk gradien linear, atur sudut menggunakan slider.
  3. Edit titik warna default dengan mengklik pemilih warna dan menyesuaikan posisinya.
  4. Tambahkan lebih banyak titik warna dengan tombol "Tambah titik warna" jika perlu.
  5. Klik "Salin CSS" untuk menyalin properti gradien ke clipboard.

Alat Terkait

🎨
palet warna gambar
Ekstrak palet ringkas warna HEX dominan dari gambar
 ☀️
kecerahan kontras gambar
Sesuaikan kecerahan dan kontras foto dengan pratinjau instan
 🌓
efek duotone
Petakan bayangan dan sorotan gambar ke dua warna kustom
Sintaks gradien CSS ▾
Contoh
Input Linear, 135°, stop 1: #7c6af7 pada 0%, stop 2: #06b6d4 pada 100%
Output background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);
Kasus Penggunaan Umum
  • Buat gradien latar belakang untuk landing page dan komponen UI
  • Buat overlay gradien untuk hero section
  • Buat pola color-stop untuk grafik atau pembatas
  • Prototipe ide gradien sebelum dipindahkan ke alat desain
Pertanyaan yang Sering Diajukan
Jenis gradien apa saja yang didukung?

Gradien linear dengan sudut khusus (0—60°) dan gradien radial (bentuk lingkaran) sama-sama didukung.

Bisakah saya menambahkan lebih dari dua color stop?

Ya. Klik "Add color stop" untuk menambahkan stop sebanyak yang Anda perlukan. Setiap stop memiliki warna dan posisi yang independen.

Bagaimana cara mengontrol arah gradien linear?

Gunakan slider Angle. 0° berarti atas ke bawah, 90° berarti kiri ke kanan, dan 135° berjalan diagonal.

Apakah output-nya kompatibel lintas browser?

Yes. The tool outputs standard CSS using the linear-gradient() and radial-gradient() functions which are supported by all modern browsers.