Generator Gradien
Buat gradien CSS yang indah dengan pratinjau langsung.
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);Tentang Generator Gradien
Buat gradien CSS yang menakjubkan untuk proyek web Anda. Sesuaikan warna, posisi, dan sudut. Salin kode CSS yang dihasilkan langsung ke stylesheet Anda.
Apa Itu Alat Ini?
Generator gradien CSS kami memungkinkan Anda membuat gradien linear dan radial yang indah secara visual dengan memilih warna, menyesuaikan posisi, dan mengatur arah atau sudut. Kode CSS diperbarui secara langsung saat Anda mendesain, dan Anda dapat menyalinnya dengan satu klik untuk langsung ditempel ke stylesheet Anda. Tidak perlu perangkat lunak desain.
Cara Menggunakan
- Pilih jenis gradien: Linear atau Radial.
- Klik color stop mana pun untuk mengubah warnanya menggunakan pemilih warna.
- Tambahkan lebih banyak color stop dengan mengklik bar gradien.
- Seret color stop untuk menyesuaikan posisinya.
- Atur sudut atau arah gradien untuk gradien linear.
- Salin kode CSS yang dihasilkan dengan tombol salin.
Kasus Penggunaan Umum
- Mendesain gradien latar belakang untuk halaman web, tombol, atau kartu
- Membuat transisi warna yang mulus untuk elemen UI
- Menghasilkan CSS gradien tanpa menulis sintaks secara manual
- Bereksperimen dengan kombinasi warna untuk proyek visual
Tips & Trik
- Gradien linear dengan 2-3 stop biasanya terlihat lebih bersih daripada yang dengan banyak stop.
- Gunakan warna analog (berdekatan di roda warna) untuk gradien yang mulus dan menyenangkan.
- Tambahkan color stop transparan untuk membuat efek fade-out di satu sisi.
Pertanyaan yang Sering Diajukan
Apa perbedaan antara gradien linear dan radial?
Gradien linear melakukan transisi warna sepanjang garis lurus dengan sudut yang dipilih, sementara gradien radial memancarkan warna keluar dari titik pusat dalam pola melingkar atau elips.
Bagaimana cara menambahkan lebih dari dua warna ke gradien saya?
Klik di mana saja pada bar gradien untuk menambahkan color stop baru, kemudian klik untuk menetapkan warna dan seret untuk menyesuaikan posisinya dalam urutan.
Bisakah saya mengontrol sudut pasti gradien linear?
Ya. Gunakan kontrol sudut untuk menetapkan arah apa pun dalam derajat, dari gradien atas ke bawah lurus (180deg) hingga diagonal khusus apa pun.
Bagaimana cara menyalin CSS yang dihasilkan ke proyek saya?
Klik tombol salin di samping output kode CSS — menyalin deklarasi background: linear-gradient(...) atau radial-gradient(...) lengkap yang siap ditempel ke stylesheet Anda.
Apakah alat ini menyimpan atau mengunggah gradien yang saya buat?
Tidak. Semuanya dihasilkan dan dirender secara lokal di browser Anda — tidak ada data gradien yang disimpan atau dikirim ke server.
Buat gradien CSS yang menakjubkan dengan generator gradien gratis kami. Desain gradien linear dan radial, sesuaikan warna, salin kode CSS secara instan.
generator gradien · gradien css · gradien linear · gradien radial · buat gradien · gradien warna · generator gradien css · gradien latar belakang · pembuat gradien