Menulis sintaks gradient secara manual itu merepotkan: sudut, urutan stop, dan posisi persentase saling memengaruhi, dan satu salah ketik saja bisa membuat seluruh background rusak diam-diam. Generator ini menjaga pratinjau dan kode tetap selaras - apa yang Anda lihat sama persis dengan CSS yang Anda salin. Semuanya berjalan sepenuhnya di sisi klien, jadi tidak ada desain yang diunggah ke mana pun.
CSS Gradient Generator Gratis
Berjalan sepenuhnya di browser Anda - tanpa unggah, tanpa daftar.
Jenis
Color stop
Kode CSS
Apa itu CSS gradient generator?
CSS gradient generator adalah alat visual yang membuatkan kode linear-gradient(), radial-gradient(), atau conic-gradient() untuk Anda. Pilih warna, geser posisi stop, atur sudutnya, lalu salin CSS yang siap ditempel sambil pratinjau langsung menunjukkan persis apa yang akan ditampilkan browser. Semuanya berjalan di browser Anda.
Cara pakai
- 1Pilih jenis gradient. Pilih linear, radial, atau conic. Linear menampilkan slider sudut; radial menambahkan bentuk (lingkaran atau elips) dan posisi; conic punya sudut awal dan posisi.
- 2Atur color stop Anda. Klik tiap swatch untuk memilih warna dan geser slidernya untuk memindahkan stop di sepanjang gradient. Tambahkan hingga 8 stop, atau kurangi sampai 2.
- 3Sesuaikan arahnya. Geser slider sudut (0-360 derajat) atau pilih kata kunci posisi. Pratinjau akan diperbarui langsung setiap kali ada perubahan.
- 4Salin kode CSS-nya. Klik Copy untuk mengambil deklarasi background, termasuk baris fallback warna solid, lalu tempel ke stylesheet Anda.
Cocok untuk siapa
- Front-end developer yang butuh background untuk hero, card, atau tombol dan ingin baris
linear-gradient()yang tepat tanpa harus menghafal sintaksnya. - Desainer web dan UI yang mencocokkan mockup: buat ulang gradient secara visual, lalu serahkan CSS yang dihasilkan langsung ke tim developer.
- Pembuat email dan landing page yang butuh baris warna solid sebagai fallback agar desain tetap tampil baik di klien lama - outputnya sudah menyertakan ini secara otomatis.
- Pelajar yang sedang belajar CSS dan ingin melihat bagaimana sudut, color stop, dan jenis gradient mengubah hasil render secara langsung.
Tanya jawab
Apakah CSS gradient generator ini gratis?
Ya - 100% gratis, tanpa perlu daftar, tanpa watermark, tanpa batasan. Buat gradient sebanyak yang Anda mau dan salin CSS-nya langsung ke proyek Anda.
Apakah ada yang diunggah ke server?
Tidak. Gradient dibuat dan ditampilkan sepenuhnya di browser Anda dengan JavaScript biasa. Tidak ada warna, kode, atau data penggunaan yang dikirim ke mana pun.
Apa perbedaan gradient linear, radial, dan conic?
Gradient linear mencampur warna sepanjang garis lurus pada sudut yang Anda tentukan. Gradient radial memancar keluar dari titik tengah berbentuk lingkaran atau elips. Gradient conic menyapu warna mengelilingi titik tengah, seperti roda warna atau diagram lingkaran.
Bagaimana cara kerja color stop pada CSS gradient?
Setiap stop memasangkan satu warna dengan posisi dari 0% sampai 100% di sepanjang garis gradient. Browser akan mencampur warna secara halus antar stop yang berdekatan. Menempatkan dua stop pada posisi yang sama akan membuat tepi tegas alih-alih perpaduan halus - berguna untuk efek garis-garis atau diagram lingkaran.
Browser mana saja yang mendukung gradient ini?
Semua browser modern - Chrome, Firefox, Safari, dan Edge - mendukung linear-gradient() dan radial-gradient() tanpa prefix; conic-gradient() sudah didukung di mana-mana sejak 2020. Kode yang disalin juga menyertakan fallback warna solid untuk browser yang lebih lama.
Bisakah gradient yang dihasilkan dipakai sebagai warna teks?
Tidak langsung bisa - gradient itu gambar, bukan warna. Terapkan gradient sebagai background-image pada elemen teks, lalu tambahkan background-clip: text dan color: transparent agar gradient terlihat menembus bentuk hurufnya.
Kenapa gradient saya menunjukkan banding?
Banding muncul saat dua stop yang jauh mencampur warna sepanjang rentang hue yang mirip, sehingga terlihat langkah warna 8-bit-nya. Kurangi dengan menambahkan color stop di tengah, memperpendek jarak perpaduan, atau memilih warna yang berbeda dari sisi kecerahan selain hue.