Pembuat Gradien CSS

Generator gradien CSS ini membuat gradien linier dan radial dari perhentian warna yang Anda kendalikan, dengan pratinjau langsung dan deklarasi latar belakang yang siap ditempel. Seret perhentian di sepanjang bilah, atur sudut atau bentuk, dan CSS akan diperbarui secara instan.

Semuanya berjalan di browser Anda dari warna dan pengaturan yang Anda pilih, jadi tidak ada yang diunggah dan Anda dapat menyalin hasilnya dan menggunakannya secara offline.

Gradien linier memadukan warna sepanjang garis lurus, dan sudut menentukan arahnya: 0 derajat mengarah ke atas, 90 derajat mengarah ke kanan, 180 derajat mengarah ke bawah. Gradien radial menyatu keluar dari pusat, sebagai lingkaran atau elips.

Keduanya merupakan nilai CSS standar, ditulis sebagai linear-gradient() dan radial-gradient(), dan keduanya menggunakan daftar perhentian warna yang sama, jadi mengganti jenis warna akan mempertahankan warna Anda dan hanya mengubah cara penyebarannya.

Setiap color stop merupakan warna yang ditempatkan pada posisi 0% hingga 100%. Gradien berpadu mulus antara perhentian yang berdekatan, sehingga posisi perhentian mengontrol di mana warnanya memuncak dan seberapa cepat warna tersebut memudar ke perhentian berikutnya.

Tambahkan perhentian sebanyak yang Anda perlukan untuk membuat gradien multiwarna, seret perhentian tersebut untuk menyempurnakan perpaduannya, atau klik bilah untuk meletakkan perhentian baru di tempat yang Anda inginkan. Dua perhentian adalah jumlah minimum yang dibutuhkan gradien.

Salin kode yang dihasilkan dan tempelkan sebagai latar belakang elemen apa pun, seperti bagian, kartu, atau tombol. Browser modern mendukung gradien linier dan gradien radial tanpa awalan vendor, sehingga nilainya berfungsi apa adanya.

Karena gradien hanyalah sebuah nilai, Anda juga dapat menggunakannya di mana pun gambar latar belakang diharapkan, melapisinya di atas warna solid sebagai pengganti, atau menggunakan kembali perhentian yang sama pada versi linier dan radial untuk tampilan yang konsisten.