Generator Gradient CSS

Buat gradient linear, radial dan konik CSS di browser Anda.

warna berhenti

Gunakan handles stop atau keyboard arrow untuk mengedit posisi.Setiap stop termasuk warna yang jelas, ketidakpastian, dan peratusan.

Siap

Pemrosesan lokal native

Gradient Anda tetap berada di browser ini. tidak ada warna atau CSS yang dihasilkan dikirim ke Converter.

Grammar impor terbatas

Import menerima gradient linear(), radial-gradient(), atau conic-gradent() dengan warna dan peratusan hex. Pernyataan, URL, variabel, dan fungsi yang tidak diketahui ditolak secara lokal.

FALBACK yang dapat diakses

CSS yang dihasilkan termasuk backback latar belakang yang solid dan berwarna-warni bersama dengan gradient untuk render yang tidak didukung dan kromium kontrol yang dapat diakses.

Pertanyaan yang Sering Diajukan

Apakah Gradient saya diunggah?

Status Gradient, warna, CSS yang diimport, dan CSS yang dikeluarkan tetap dalam browser Anda.

Jenis CSS apa yang didukung?

Generator menghasilkan linear-gradient(), radial-gradent() dan konic-graduent() output dengan beberapa hex warna stop.

Apa yang bisa saya impor?

Import menerima grammar yang sengaja terbatas menggunakan satu fungsi gradient yang didukung, warna hex, peratusan opsi, dan nilai sudut atau posisi terbatasi.

Developer dan Alat Desain yang Berkaitan

Alat PengembangJelajahi utilitas browser CSS Konverter WarnaKonversi warna CSS SCSS PenyusunSSS / SCSS Snippets Online CSS PengecilKompresi kode CSS secara lokal di browser Anda. Gambar warna pickerPilih warna dari gambar secara lokal.

Generator Gradient CSS

Membangun gradient CSS linear atau radial dan preview warna stop, sudut, posisi, dan pengulangan.

Pengantar
Jenis gradient, stop warna, posisi, sudut, dan pengaturan berulang.
output
Preview dan copyable CSS background statement.
Pembatasan yang nyata
Browser rendering dapat sedikit berbeda dengan mesin, dan alat tidak menilai kontras atau menjamin dukungan di browser warisan.
Privasi dan pengendalian data
jenis gradient, warna stops, posisi, sudut, dan pengaturan ulangan diproses dalam tab browser ini. Converter tidak menerima atau menyimpannya; menutup atau mengunduh halaman akan membersihkan kondisi kerja kecuali alat secara eksplisit menawarkan download lokal.

Bagaimana cara menggunakan alat ini

  1. Menyediakan jenis gradient, stop warna, posisi, sudut, dan pengaturan berulang dalam kontrol alat.
  2. Pilih pengaturan yang mempengaruhi preview langsung dan pernyataan latar belakang CSS yang dapat disalin, kemudian jalankan alat.
  3. Periksa preview langsung dan pernyataan latar belakang CSS yang dapat disalin sebelum menyalin atau men-downloadnya.

Modus kegagalan umum

Kekurangan warna stop, warna tidak sah, atau posisi yang tidak kompatibel mencegah deklarasi CSS yang valid dari dibangun.

Contoh yang berguna

Buat gradient linear 90 derajat dari #111827 pada 0% ke #f59e0b pada 100% dan salin pernyataan.