Langsung ke konten
ToolMug

Gunakan ↑ ↓ untuk berpindah, Enter untuk membuka, Esc untuk menutup.

Generator Gradien CSS

Buat background gradien CSS secara visual, bukan dengan coba-coba. Seret titik warna di sepanjang bilah, ubah sudut atau pusatnya, lalu salin kode yang berfungsi di semua browser modern.

Berjalan di browser Anda — tidak ada yang Anda masukkan yang diunggah

Titik warna

Klik bilah untuk menambah titik, seret titik untuk memindahkannya, atau pilih satu titik lalu gunakan tombol panah. Delete menghapus titik yang dipilih.

Titik terpilih

Jenis

135°
CSS
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Tailwind
bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]

Cara menggunakan

  1. Mulai dari preset atau gradien bawaan.
  2. Klik bilah untuk menambah warna; seret titik untuk memindahkannya.
  3. Pilih Linear, Radial, atau Kerucut, lalu atur sudut atau pusatnya.
  4. Salin deklarasi CSS atau class Tailwind.

Penjelasan opsi

Linear
Warna berubah di sepanjang garis lurus. 0° mengarah ke atas, 90° ke kanan, dan 180° ke bawah.
Radial
Warna menyebar dari titik pusat membentuk lingkaran atau elips yang pas dengan elemen.
Kerucut
Warna berputar mengelilingi titik pusat seperti roda warna atau diagram lingkaran.
Ulangi
Mengulang pola; atur titik warna dalam rentang pendek, misalnya 0% sampai 10%, untuk membuat garis-garis.

Seperti apa kode yang dihasilkan

Dua warna yang sama, ditulis oleh tiap jenis. Titik warna selalu ditulis dengan posisi persentase:

linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)

Versi Tailwind membungkus nilai yang sama dalam kelas nilai arbitrer. Spasi menjadi garis bawah dan spasi setelah koma dihapus:

bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]

Pada baris CSS terakhir, pola berulang setiap 10% elemen, yang menghasilkan garis-garis tipis. Untuk gradien conic, sudut adalah titik awal sapuan, dan untuk gradien radial kedua persentase adalah titik pusat.

Pertanyaan yang sering diajukan

Browser apa saja yang mendukung gradien ini?

Gradien linear, radial, dan kerucut berfungsi di semua versi terbaru Chrome, Edge, Firefox, dan Safari, tanpa vendor prefix.

Bagaimana cara membuat gradien transparan?

Ketik warna dengan kanal alfa, misalnya #00000000 untuk hitam yang sepenuhnya transparan, di kolom warna sebuah titik.

Bagaimana cara memakai class Tailwind?

Tambahkan ke daftar class sebuah elemen di Tailwind CSS 3 atau 4. Class ini memakai arbitrary value, jadi tidak perlu konfigurasi apa pun.

Privasi

Alat ini berjalan sepenuhnya di browser Anda. File dan teks Anda diproses di perangkat Anda dan tidak pernah diunggah ke server kami.

Alat terkait