Input
Menyiapkan ruang kerja Anda…
Cara menggunakan
- Pilih Linear atau Radial dan tentukan kedua warna.
- Atur posisi stop serta sudut untuk gradient linear.
- Salin CSS dan terapkan deklarasi background pada elemen.
Mengatur gradient CSS
Gradient CSS membentuk latar dari warna tanpa file gambar terpisah. Latar dapat mengikuti ukuran kartu, banner atau bagian halaman dan tetap dapat diedit dalam stylesheet.
Generator ini memakai dua warna. Pilih arah linear atau gradient radial berbentuk lingkaran di tengah, lalu atur posisi stop untuk menentukan awal dan akhir transisi.
Arah dan color stop
Sudut hanya berlaku untuk gradient linear. Mode radial memakai lingkaran di tengah elemen tanpa pengaturan sudut.
Posisi stop berkisar dari 0% hingga 100%. Mendekatkannya mempersempit transisi; posisi yang sama menghasilkan batas warna tegas.
#2563eb → #9333ea, 135 degreesbackground: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);Gradient linear dua stop dengan warna dan sudut yang ditampilkan.
Makna pratinjau
Pratinjau langsung memakai CSS yang dihasilkan. Proporsinya dapat berbeda dari elemen tujuan, terutama pada gradient radial.
Stop pertama tidak boleh berada setelah stop kedua. Editor menghasilkan satu lapisan gradient dengan dua warna; stop dan lapisan tambahan dapat ditulis di stylesheet.
Menerapkan deklarasi
Hasil salinan dimulai dengan background:. Terapkan pada selector yang sesuai dan periksa gambar, warna atau shorthand latar yang mungkin tertimpa.
Input teks hingga 1 MiB. Transformasi CSS dan HTML berjalan dalam worker dengan batas 30 detik. Alat warna menggunakan sRGB; gaya yang dihasilkan merupakan pratinjau dan perlu diuji dalam tata letak Anda sendiri.
Pertanyaan umum
Dapatkah saya menambah warna ketiga?
Alat ini mendukung dua stop. Salin CSS lalu tambahkan color stop lain yang dipisahkan koma bila diperlukan.
Mengapa mode radial tidak memiliki pengaturan sudut?
Gradient radial lingkaran terpusat menyebar keluar dari pusatnya. Sudut hanya relevan untuk gradient linear.
Dapatkah saya membuat pemisah warna tegas?
Ya. Tetapkan kedua stop pada posisi yang sama untuk menghilangkan transisi.
Apakah alat menghasilkan file gambar?
Tidak. Salin CSS menyediakan deklarasi background. Browser menggambar gradient saat deklarasi digunakan.
Mengapa gradient pada elemen saya berbeda?
Ukuran dan proporsi elemen tujuan memengaruhi tampilannya. Periksa pada elemen sebenarnya, bukan hanya kartu pratinjau.