Generator

Pembuat Gradien CSS

Buat gradien CSS yang indah dengan editor visual dan pratinjau langsung.

Tipe

Arah90°

Warna / Posisi

100%

Pratinjau

Klik untuk menambahkan titik warna

Kode CSS

background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
background-image: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
background-image: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);

Ekspor

background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
background-image: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);

Gradien Tersimpan (0/10)

Tidak ada gradien tersimpan

Tentang Pembuat Gradien CSS

Gradien CSS menciptakan transisi halus antara dua atau lebih warna tanpa menggunakan gambar. Gradien bisa linear (sepanjang garis lurus), radial (memancar dari titik pusat), atau konik (berputar di sekitar pusat). Editor visual ini memungkinkan Anda membuat gradien kompleks dengan beberapa titik warna dan langsung menghasilkan kode CSS.

Jelajahi semua alat Generator

Cara Menggunakan

Pilih tipe gradien (linear, radial, atau konik). Untuk gradien linear, sesuaikan sudut atau pilih arah preset. Tambah, hapus, atau modifikasi titik warna — setiap titik memiliki pemilih warna dan slider posisi. Pratinjau langsung diperbarui secara instan. Salin kode CSS yang dihasilkan dengan satu klik.

Kasus Penggunaan Umum

Membuat gradien latar belakang untuk bagian hero dan banner
Mendesain overlay gradien untuk gambar dan kartu
Membangun latar belakang tombol dan elemen UI yang berwarna
Menghasilkan border dan efek teks gradien dengan CSS
Membuat prototipe skema warna untuk aplikasi web dan mobile

Cara Menggunakan Pembuat Gradien CSS Istirahat sejenak dan mainkan game browser gratis

Semua Postingan

c/tools_gradient-generator0

Lihat Semua Buat Postingan