Generator Gradien CSS

Rancang gradien linear dan radial CSS dengan pratinjau langsung. Tambahkan color stop, atur sudut, dan salin background CSS yang bersih — semuanya di browser Anda.

Pratinjau

Gradien

Sudut

90°

Color stop

#f5530c

#ffa94d

CSS

background: linear-gradient(90deg, #f5530c 0%, #ffa94d 100%);

Cara menggunakan Generator Gradien CSS

1
Pilih jenis gradien
Beralih antara Linear dan Radial. Gradien linear juga memungkinkan Anda mengatur arah dengan penggeser sudut, yang diukur dalam derajat.
2
Tambahkan dan warnai stop Anda
Klik petak warna untuk memilih setiap warna, dan atur posisinya dari 0 hingga 100 persen. Tambahkan lebih banyak color stop untuk perpaduan banyak warna, atau hapus sebuah stop untuk menyederhanakannya.
3
Pratinjau secara langsung
Panel pratinjau menampilkan gradien Anda persis seperti yang akan ditampilkan di browser, dan diperbarui setiap kali Anda membuat perubahan.

4
Salin CSS
Salin baris background yang dihasilkan dan tempel ke stylesheet Anda. Ini adalah CSS standar yang berfungsi di setiap browser modern.

Pertanyaan yang sering diajukan

Bagaimana cara membuat gradien CSS?

Pilih linear atau radial, atur sudut, dan tambahkan color stop sebanyak yang Anda mau. Pratinjau diperbarui secara langsung, dan CSS yang siap pakai muncul di bawahnya sebagai properti background yang bisa Anda salin langsung ke stylesheet.

Apa perbedaan antara gradien linear dan radial?

Gradien linear memadukan warna di sepanjang garis lurus, dan Anda mengontrol arahnya dengan sudut dalam derajat. Gradien radial memadukan warna keluar membentuk lingkaran dari titik tengah. Keduanya menggunakan color stop yang sama; hanya bentuk perpaduannya yang berbeda.

Apa itu color stop?

Color stop adalah sebuah warna yang dipasangkan dengan posisi dari 0 hingga 100 persen di sepanjang gradien. Dua stop menghasilkan perpaduan dua warna yang sederhana, sedangkan menambah lebih banyak memungkinkan Anda membangun gradien kaya dengan banyak warna. Ubah nilai posisi untuk menggeser letak setiap warna.

Bagaimana cara menggunakan gradien dalam proyek saya?

Salin baris yang dihasilkan dan tempel sebagai properti background pada elemen apa pun, seperti div atau section. Karena ini CSS murni, ia berfungsi di setiap browser modern tanpa perlu gambar atau pustaka.

Apakah data saya diunggah ke server?

Tidak. Semuanya berjalan sepenuhnya di browser Anda. Apa pun yang Anda buat tidak pernah diunggah, dicatat, atau disimpan, sehingga pekerjaan Anda tetap sepenuhnya privat dan alat ini tetap berfungsi bahkan saat Anda sedang offline.

Alat terkait

Lanjutkan dengan alat praktis ini

Konverter HTML ke Teks

Pemformat JSON

Penguji Regex

Dekoder JWT

Generator Box Shadow CSS

Konverter Teks ke HTML