Pembuat Gradien CSS (lapisan, berulang)
Buat gradien linear, radial, dan konik, tumpuk beberapa lapisan, seret titik warna, atur sudut, pusat, transparansi, dan pengulangan, lalu salin CSS-nya
Memuat alat…
Membuat latar dari hingga empat gradien linear, radial, atau konik yang ditumpuk dan memberikan CSS background-image-nya. Lapisan tembus pandang menghasilkan efek cahaya atau mesh, pengulangan menghasilkan garis-garis dan cincin, dan gambarnya bisa disimpan sebagai PNG.
Cara pakai
- Mulai dari salah satu kotak "Preset" atau dari pengaturan awal. Di "Lapisan", pilih lapisan yang ingin diedit, lalu atur "Jenis", "Sudut", dan "Berulang".
- Untuk lapisan radial dan konik, klik atau seret pada pratinjau untuk memindahkan titik pusat, lalu pilih "Bentuk" dan "Ukuran".
- Klik bilah "Titik warna" untuk menambah titik dan seret lingkaran untuk memindahkannya. Atur warna, "Opasitas", "Posisi", dan "Titik tengah" titik yang dipilih di bagian bawah.
- Tekan "Tambah lapisan" untuk menumpuk lapisan tembus pandang di atas; ubah urutannya atau tekan "Sembunyikan" untuk membandingkan.
- Tekan "Salin" di samping CSS, atau pilih "Ukuran PNG" lalu tekan "Simpan sebagai PNG".
Cara kerja
- Hasilnya adalah satu deklarasi background-image; lapisan digambar dari atas ke bawah sesuai urutan CSS. Warna tembus pandang ditulis sebagai rgb(r g b / a).
- Titik tengah adalah petunjuk transisi CSS yang menggeser tempat dua titik bercampur setengah-setengah. Pengulangan menyusun ulang rentang dari titik pertama sampai titik terakhir, seperti repeating-linear-gradient.
- Sudut dan kata kunci ukuran radial mengikuti CSS Images 3, dan warna dicampur dalam sRGB seperti bawaan browser. PNG digambar di browser dengan aturan yang sama.
- Lapisan dan titik Anda tetap tersimpan di browser ini.
Pertanyaan umum
- Bagaimana cara menumpuk beberapa gradien di CSS?
- Tulis semuanya di background-image dipisahkan koma. Yang pertama digambar paling atas, jadi lapisan atas perlu sedikit transparansi. Kotak CSS menulis dalam bentuk itu.
- Bagaimana cara membuat latar bergaris?
- Nyalakan "Berulang" dan letakkan dua titik dengan warna yang sama pada posisi yang sama agar tepinya tajam. Preset "Garis-garis" adalah awal yang cepat.
- Bagian tengah gradien saya terlihat kusam. Apa yang bisa dilakukan?
- Nyalakan "Titik tengah" untuk menggeser titik pencampuran, atau tambahkan titik di tengah dengan warna yang diinginkan. Warna komplementer yang dicampur menjadi abu-abu.
- Apakah pratinjau dan PNG bisa berbeda?
- Pratinjau digambar browser dari CSS; PNG dihitung dengan aturan yang sama. Selain pembulatan, keduanya sama.