Penjana Gradien CSS

Cara menggunakan

1. Mula daripada pratetap atau gradien lalai.
2. Klik bar untuk menambah warna; seret hentian untuk mengalihkannya.
3. Pilih Linear, Jejarian atau Kon dan laraskan sudut atau pusat.
4. Salin deklarasi CSS atau kelas Tailwind.

Penerangan pilihan

Linear

Warna berubah di sepanjang garis lurus. 0° menghala ke atas, 90° ke kanan dan 180° ke bawah.

Jejarian

Warna tersebar dari titik pusat sebagai bulatan atau elips yang muat dengan elemen.

Kon

Warna berputar mengelilingi titik pusat seperti roda warna atau carta pai.

Ulang

Mengulang corak; tetapkan hentian dalam julat yang pendek, seperti 0% hingga 10%, untuk membuat jalur.

Rupa kod yang dijana

Dua warna yang sama, ditulis oleh setiap jenis. Hentian sentiasa ditulis dengan kedudukan peratusan:

linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)

Versi Tailwind membungkus nilai yang sama dalam kelas nilai sewenang-wenangnya. Ruang menjadi garis bawah dan ruang selepas koma dibuang:

bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]

Dalam baris CSS terakhir, corak berulang setiap 10% daripada elemen, yang menghasilkan jalur nipis. Bagi gradien kon, sudut ialah tempat sapuan bermula, dan bagi gradien jejarian dua peratusan itu ialah pusat.

Soalan lazim

Privasi

Alat ini berjalan sepenuhnya dalam pelayar anda. Fail dan teks anda diproses pada peranti anda dan tidak pernah dimuat naik ke pelayan kami.