Pembuat Gradien CSS — Desain Gradien, Salin CSS-nya

Apa Itu Pembuat Gradien CSS?

Pembuat Gradien CSS (CSS ग्रेडिएंट जनरेटर) memungkinkan Anda mendesain gradien warna secara visual dan mendapatkan kode CSS yang sesuai. Gradien — perpaduan halus dari satu warna ke warna lain — ada di mana-mana dalam desain modern: hero section, tombol, kartu, latar aplikasi, dan thumbnail YouTube. Menulis linear-gradient() secara manual dan menyegarkan halaman untuk melihat hasilnya itu lambat; dengan pembuat, Anda menggeser slider, melihat pratinjau live, dan menyalin kode jadi.

Tool gratis ini mendukung ketiga tipe gradien CSS — linear, radial, dan conic — dengan 2 hingga 8 color stop, sudut, bentuk, dan pusat yang dapat diatur, sembilan preset siap pakai, tombol acak dan balik, output CSS dengan fallback warna solid, dan unduhan PNG 1920×1080 saat Anda membutuhkan gradien sebagai gambar. Semuanya berjalan di browser Anda.

Fitur Utama

• Tiga tipe gradien — linear, radial, dan conic.
• Kontrol sudut dari 0° hingga 360° untuk gradien linear dan conic.
• Bentuk dan pusat untuk radial (lingkaran atau elips) dan pusat untuk conic.
• Hingga 8 color stop, masing-masing dengan pemilih warna, kolom HEX, dan slider posisi.
• Sembilan preset termasuk Ocean, Sunset, Mint, dan preset Saffron saffron-putih-hijau.
• Acak dan Balik untuk eksplorasi cepat.
• CSS dengan fallback — siap ditempel.
• Ekspor PNG 1920×1080 untuk wallpaper, thumbnail, dan slide.

Cara Membuat Gradien — Langkah demi Langkah

1. Pilih tipe: Linear, Radial, atau Conic.
2. Atur arah: geser slider sudut, atau pilih bentuk dan pusat.
3. Edit color stop: klik kotak warna atau ketik kode HEX, lalu geser slider untuk mengatur posisinya.
4. Tambah atau hapus stop dengan “Tambah stop” dan tombol × (minimum 2, maksimum 8).
5. Coba preset, Acak, atau Balik untuk mencari ide.
6. Salin CSS atau Unduh PNG.

Penjelasan Sintaks Gradien CSS

Pada gradien linear, sudut mengikuti konvensi CSS: 0deg menunjuk ke atas, 90deg ke kanan, 180deg ke bawah, dan 270deg ke kiri, berputar searah jarum jam. Kata kunci juga berfungsi — to right sama dengan 90deg dan to bottom right menunjuk ke sudut. Untuk gradien radial, circle mempertahankan bentuk bulat sementara ellipse (default di CSS) meregang mengikuti proporsi elemen. Gradien conic dimulai pada sudut yang diberikan setelah from dan menyapu searah jarum jam mengelilingi pusat.

Memahami Color Stop

Setiap stop memiliki warna dan posisi dari 0% hingga 100% di sepanjang gradien. Browser memadukan secara halus antara stop yang bertetangga. Beberapa pola yang berguna:

• Perpaduan merata — stop di 0% dan 100% untuk pudar dua warna yang sederhana.
• Condong — geser stop kedua ke 30% sehingga warna kedua mendominasi.
• Tepi tegas — dua stop di posisi yang sama membuat garis tajam, berguna untuk garis-garis dan latar terbelah.
• Bendera tiga warna — preset Saffron memakai #FF9933 0%, #FFFFFF 50%, #138808 100%.

Stop diurutkan menurut posisi saat CSS ditulis, jadi Anda bisa menambahkannya dalam urutan apa pun. Tombol Balik mencerminkan setiap posisi (stop di 20% pindah ke 80%), membalik gradien tanpa mengetik ulang warna.

Penggunaan Praktis

• Hero section dan landing page — gradien diagonal halus menambah kedalaman tanpa gambar.
• Tombol — gradien dua warna yang lembut terlihat modern; gelapkan sedikit saat hover.
• Kartu dan overlay — gradien dari transparan ke gelap di atas foto membuat teks putih terbaca.
• Teks gradien — terapkan gradien sebagai background dan potong sesuai teks.
• Diagram lingkaran dan cincin progres — gradien conic dengan tepi tegas menggambarnya hanya dengan CSS.
• Thumbnail dan wallpaper — unduh PNG 1920×1080 dan tambahkan teks di editor mana pun.

Snippet Siap Pakai

Teks gradien: background: linear-gradient(90deg, #1B98E0, #7B2FF7); -webkit-background-clip: text; background-clip: text; color: transparent;

Overlay foto: background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%), url(photo.jpg) center / cover; — gradien ditulis lebih dulu agar berada di atas gambar.

Diagram lingkaran sederhana: background: conic-gradient(#1B98E0 0% 40%, #FF9933 40% 75%, #138808 75% 100%); border-radius: 50%; — irisan 40%, 35%, dan 25%.

Contoh Kerja: Latar Belakang Thumbnail

Misalkan Anda butuh latar yang tegas untuk thumbnail YouTube tentang teknologi. Pilih Linear, klik preset Ocean (#1B98E0 ke #7B2FF7) dan atur sudut ke 135° sehingga warna berjalan dari sudut kiri atas ke kanan bawah. Kotak CSS sekarang berbunyi background: linear-gradient(135deg, #1B98E0 0%, #7B2FF7 100%);. Ingin sorotan lembut di belakang presenter? Beralih ke Radial, pilih Lingkaran dan pusatkan di Kanan, lalu tambahkan stop ketiga #FFFFFF di 0% agar cahayanya mulai terang. Setelah terlihat pas, klik Unduh PNG untuk mendapatkan gambar 1920×1080, yang mempertahankan bentuk 16:9 thumbnail; buka di editor Anda dan tambahkan teks dan foto di atasnya. Karena gambar dibuat dari perhitungan warna, bukan foto, gambar tetap tajam meski dikompresi.

Tipe Gradien Mana yang Harus Dipilih?

Linear adalah default yang aman untuk latar, tombol, dan header — mudah dibaca dan bekerja di ukuran apa pun. Radial menciptakan fokus: pusat yang lebih terang menarik mata ke apa pun yang ada di atasnya, cocok untuk kartu profil, spotlight, dan efek vignette. Conic adalah spesialis — sempurna untuk roda warna, diagram lingkaran, spinner loading, dan pola starburst, tetapi bisa terlihat ramai sebagai latar satu halaman penuh. Jika ragu, mulai dengan linear 135°, lalu bereksperimen.

Tentang Ekspor PNG

PNG digambar dengan fungsi gradien canvas browser pada 1920×1080 piksel. Untuk gradien linear, tool mereproduksi konvensi sudut CSS dan panjang garis gradien, sehingga gambar cocok dengan yang Anda lihat di pratinjau. Untuk gradien radial, PNG memakai lingkaran yang mencapai sudut terjauh, ukuran default CSS; jika Anda memilih elips, PNG tetap digambar sebagai lingkaran, sehingga bentuknya bisa sedikit berbeda. Ekspor conic membutuhkan browser dengan dukungan canvas conic — Chrome, Edge, Firefox, dan Safari terbaru memilikinya.

Tips Desain dan Aksesibilitas

• Periksa kontras di kedua ujung. Teks harus terbaca di bagian gradien yang paling terang dan paling gelap. Pembuat Palet Warna kami menampilkan rasio kontras.
• Buat halus untuk area luas. Rona bertetangga (biru ke ungu) terlihat lebih tenang daripada yang berlawanan (merah ke hijau), yang bisa menghasilkan bagian tengah keruh.
• Hindari bagian tengah abu-abu. Jika perpaduan dua warna terlihat kusam di tengah, tambahkan stop tengah yang lebih cerah.
• Pakai warna brand. Gradien antara dua nuansa warna brand Anda menjaga desain tetap konsisten.
• Hormati mode gelap. Gradien yang cerah bisa menyilaukan di tema gelap; pertimbangkan varian yang lebih dalam.

Siapa yang Memakai Pembuat Gradien?

• Developer front-end yang menata gaya website dan aplikasi.
• Desainer UI/UX yang membuat prototipe latar dan tombol.
• YouTuber dan kreator Instagram yang membuat thumbnail dan latar story.
• Blogger yang menambahkan header berwarna tanpa gambar berat.
• Pelajar yang belajar CSS.
• Presenter yang menginginkan latar slide yang bersih.

Kesalahan Umum yang Perlu Dihindari

• Memakai background-color — gradien adalah gambar, jadi gunakan background atau background-image.
• Terlalu banyak warna — lebih dari tiga atau empat stop bisa terlihat ramai.
• Lupa tinggi elemen — gradien pada elemen kosong tanpa tinggi tidak terlihat.
• Berulang di halaman panjang — pada body, tambahkan min-height: 100vh atau background-attachment: fixed agar gradien menutupi seluruh layar dan tidak berulang dalam garis-garis saat konten pendek.

Pemecahan Masalah

• Kolom HEX diabaikan — masukkan kode enam digit lengkap dengan # (misalnya #1B98E0).
• Tidak bisa menghapus stop — gradien membutuhkan minimal dua stop.
• Banding pada gradien besar — garis halus bisa muncul pada warna yang sangat mirip di beberapa layar; perlebar sedikit perbedaan warnanya.

Glosarium Singkat

• Gradien: transisi halus antar warna.
• Color stop: sebuah warna dan posisinya dalam gradien.
• Linear: memadukan sepanjang garis lurus.
• Radial: memadukan keluar dari pusat.
• Conic: memadukan mengelilingi titik pusat.
• Fallback: warna solid yang dipakai jika gradien tidak diterapkan.

Mengapa Memakai Pembuat Gradien CSS Ini?

Mencakup setiap tipe gradien CSS dengan kontrol presisi, pratinjau live, kode bersih, dan ekspor gambar — gratis, cepat, dan privat.

Pembuat Gradien CSS — Fakta Penting

Pertanyaan yang Sering Diajukan

Jelajahi Tools Prompt Minds Lainnya

Pembuat Gradien CSS bekerja dengan baik bersama tools gratis kami yang lain. Setiap tool Prompt Minds berjalan sepenuhnya di browser Anda — tanpa daftar, tanpa unggahan, tanpa watermark. Jelajahi semua tools gratis.