Generator Gradien CSS

Buat CSS linear-gradient dari warna dan arah.

Pengembang

Pilih warna dan arah untuk menghasilkan linear-gradient CSS. Pratinjau diperbarui secara langsung. Salin CSS-nya setelah selesai. Berjalan di browser Anda.

0%
100% 
background: linear-gradient(to right, #3b82f6, #8b5cf6);

Tentang Generator Gradient CSS

Alat ini membuat linear-gradient CSS dari arah dan warna pilihan Anda. Anda dapat menambahkan beberapa color stop. Pratinjau dan CSS diperbarui saat Anda mengubah opsi. Salin snippet-nya ke stylesheet Anda.

Cara penggunaan

  1. Pilih arah (misalnya to right, 45deg).
  2. Pilih warna dengan color picker atau masukkan hex. Tambahkan lebih banyak warna jika diperlukan.
  3. Salin CSS yang dihasilkan dan tempel ke proyek Anda.

Fitur Utama

  • Pemilihan arah dan warna visual dengan pratinjau gradient secara langsung
  • Dukungan untuk beberapa color stop — buat gradient dua warna atau multi-warna yang kompleks
  • Menghasilkan sintaks CSS linear-gradient standar yang kompatibel dengan semua browser modern
  • Salin ke clipboard satu klik untuk integrasi alur kerja yang cepat
  • 100% berbasis browser — tanpa komunikasi server atau unggah data
  • Melengkapi CSS Box Shadow Generator untuk desain CSS visual yang lengkap

Kapan Menggunakan Alat Ini

  • Membuat latar belakang gradient untuk bagian hero, banner, dan header
  • Mendesain tombol gradient dan elemen call-to-action
  • Membangun efek overlay untuk gambar dan latar belakang video
  • Bereksperimen dengan kombinasi warna sebelum menerapkannya ke kode
  • Mempelajari sintaks gradient CSS melalui eksperimen visual

Detail Teknis

Alat ini menghasilkan nilai CSS linear-gradient() dengan arah dan color stop yang dipilih. Arah bisa berupa kata kunci (to top, to right, to bottom left) atau sudut dalam derajat. Setiap color stop dapat secara opsional menyertakan posisi dalam persentase. Output-nya adalah CSS standar yang berfungsi di semua browser modern (Chrome, Firefox, Safari, Edge) tanpa vendor prefix. Untuk gradient radial atau conic, Anda perlu memodifikasi output secara manual. Pratinjau merender gradient pada elemen div menggunakan CSS yang sama persis dengan yang Anda salin.

Kesimpulan

CSS Gradient Generator adalah alat visual dan intuitif untuk membuat gradient linear yang menakjubkan tanpa menulis CSS secara manual. Alat ini menghasilkan kode yang kompatibel dengan browser dalam satu klik — sempurna untuk desainer dan pengembang yang menginginkan gradient sempurna tanpa tebak-tebakan.

Pertanyaan yang Sering Diajukan

Bisakah saya menambahkan lebih dari dua warna?
Ya. Gunakan Tambah warna untuk menambahkan stop. Anda dapat mengurutkan ulang atau menghapusnya. Setiap stop dapat memiliki posisi (misalnya 50%).
Apakah gradient saya dikirim ke server?
Tidak. CSS dibuat di browser Anda.
Browser apa yang mendukung linear-gradient?
Semua browser modern mendukung linear-gradient. Alat ini menghasilkan CSS standar; tambahkan vendor prefix jika Anda memerlukan dukungan browser lama.
Bisakah saya membuat gradient radial atau conic?
Alat ini berfokus pada gradient linear. Untuk gradient radial atau conic, Anda dapat memodifikasi output yang dihasilkan dengan mengganti linear-gradient menjadi radial-gradient atau conic-gradient dan menyesuaikan parameternya.