Generator gradien CSS

Buat gradien CSS linear, radial, atau konik dengan beberapa warna, lihat langsung, lalu salin kode CSS atau Tailwind. Ekspor sebagai gambar PNG.

Gratis
Tanpa daftar
Tanpa unggah file
Windows, Mac, Android, iPhone

Memuat alat…

Tentang alat ini

Buat gradien CSS secara langsung: linear, radial, atau konik, hingga 8 warna dengan posisi dan opasitas, sudut dan pusat yang bisa diatur. Salin kode CSS atau kelas Tailwind, atau simpan gradien sebagai gambar untuk wallpaper atau mockup.

Kapan menggunakannya

Latar bagian dan tombol

Gradien halus memberi kedalaman pada banner utama atau tombol utama tanpa memuat gambar: kodenya muat dalam satu baris.

Lapisan di atas foto

Gradien dari transparan ke hitam di bagian bawah gambar membuat judul putih terbaca, apa pun fotonya.

Wallpaper dan visual

Disimpan dalam 1920 × 1080, gradien bisa jadi wallpaper, latar slide, atau dasar visual media sosial.

Cara menggunakan

Pilih jenis gradien dan sudutnya.
Atur setiap warna dan posisinya, hingga 8 warna.
Salin kode CSS atau Tailwind, atau simpan gradien sebagai gambar.

Cara kerjanya

Alat ini menulis sintaks yang sama dengan stylesheet: warna diurutkan berdasarkan posisi, opasitas menjadi rgba(), dan sudut mengikuti konvensi CSS (0deg mengarah ke atas, 90deg ke kanan).

Untuk ekspor gambar, gradien digambar ulang di canvas dengan aturan yang sama seperti CSS: garis gradien linear dihitung agar sudut-sudut mendapat warna ujung, dan gradien radial mencapai sudut terjauh.

Tips untuk hasil terbaik

Dua warna yang bersebelahan di roda warna menghasilkan gradien paling alami.
Hindari melewati abu-abu: di antara dua warna komplementer, tambahkan warna perantara yang cerah.
Jika ada teks di atasnya, periksa kontras terhadap warna paling terang dari gradien.
Gradien konik berulang membentuk pola kipas yang indah dengan dua warna berdekatan.

Masalah umum dan solusinya

Muncul pita abu-abu di tengah

Memadukan dua warna berlawanan melewati abu-abu. Tambahkan warna perantara atau dekatkan nadanya.

Gradien tampak bergaris

Gradien yang sangat halus di area luas bisa menampakkan pita. Perbesar perbedaan warna atau tambahkan sedikit noise dalam gambar.

Kelas Tailwind tidak berfungsi

Kelas bg-[…] memerlukan Tailwind 3 ke atas dengan nilai arbitrer aktif (bawaan).

Pertanyaan umum

Apa beda gradien linear, radial, dan konik?

Linear memadukan warna sepanjang garis lurus, radial menyebar dari pusat ke luar, dan konik berputar mengelilingi pusat seperti jarum jam (berguna untuk diagram lingkaran dan roda warna).

Apakah kode berfungsi di semua browser?

Ya. linear-gradient, radial-gradient, dan conic-gradient didukung semua browser terbaru. Warna solid ditambahkan di baris pertama untuk browser yang sangat lama.

Bisakah saya memakai transparansi?

Ya: setiap warna punya opasitas sendiri. Gradien ke warna transparan sering dipakai untuk menggelapkan bagian bawah foto agar teks bisa diletakkan di atasnya.

Apa fungsi opsi “Ulangi”?

Menghasilkan gradien berulang: polanya diulang, membentuk garis-garis atau lingkaran konsentris dari dua atau tiga warna yang berdekatan.

Pencarian terkait

Masih bermasalah?

Tanyakan di forum: kategori, alat, data perangkat, dan hasil tes akan diisi otomatis.