Generator Gradient CSS

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

Perhentian warna

Gunakan gagang perhentian atau panah keyboard untuk mengedit posisi. Setiap perhentian menyertakan warna, opasitas, dan persentase yang eksplisit.

Siap

Pemrosesan lokal native

Gradien Anda tetap berada di browser ini. Tidak ada warna atau CSS yang dihasilkan yang dikirim ke Convertr.

Grammar impor terbatas

Impor menerima linear-gradient(), radial-gradient(), atau conic-gradient() dengan warna hex dan persentase. Deklarasi, URL, variabel, dan fungsi yang tidak dikenal ditolak secara lokal.

Fallback yang dapat diakses

CSS yang dihasilkan menyertakan fallback warna latar belakang solid bersama gradien untuk perender yang tidak didukung dan krom kontrol yang dapat diakses.

Pertanyaan yang Sering Diajukan

Apakah gradien saya diunggah?

Tidak. Status gradien, warna, CSS yang diimpor, dan CSS yang dihasilkan tetap di browser Anda.

Jenis CSS apa yang didukung?

Generator menghasilkan output linear-gradient(), radial-gradient(), dan conic-gradient() dengan beberapa perhentian warna hex.

Apa yang bisa saya impor?

Impor menerima tata bahasa yang sengaja dibatasi menggunakan satu fungsi gradien yang didukung, warna hex, persentase opsional, dan nilai sudut atau posisi terbatas.

Developer dan Alat Desain yang Berkaitan

Alat PengembangJelajahi utilitas browser Konverter Warna CSSKonversi warna CSS Kompiler SCSSKompilasi cuplikan Sass/SCSS secara online Peminifier CSSKompresi kode CSS secara lokal di browser Anda. Pemilih Warna GambarPilih 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
Pratinjau langsung dan deklarasi latar belakang CSS yang dapat disalin.
Pembatasan yang nyata
Perenderan browser dapat sedikit berbeda tergantung mesin, dan alat ini tidak mengevaluasi kontras atau menjamin dukungan di browser lama.
Privasi dan pengendalian data
jenis gradien, titik henti warna, posisi, sudut, dan pengaturan pengulangan diproses di tab browser ini. Convertr tidak menerima atau menyimpannya; menutup atau memuat ulang halaman akan membersihkan status kerja kecuali alat secara eksplisit menawarkan unduhan lokal.

Bagaimana cara menggunakan alat ini

  1. Berikan jenis gradien, titik henti warna, posisi, sudut, dan pengaturan pengulangan dalam kontrol alat.
  2. Pilih pengaturan yang memengaruhi pratinjau langsung dan deklarasi latar belakang CSS yang dapat disalin, lalu jalankan alat.
  3. Periksa preview langsung dan pernyataan latar belakang CSS yang dapat disalin sebelum menyalin atau men-downloadnya.

Mode kegagalan umum

Titik henti warna yang hilang, warna tidak valid, atau posisi yang tidak kompatibel mencegah deklarasi CSS yang valid untuk dibuat.

Contoh yang berguna

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