Penjana Gradien CSS

Gunakan peluncur sudut (0-360 darjah). 0deg dari bawah ke atas, 90deg dari kiri ke kanan, 180deg dari atas ke bawah, 270deg dari kanan ke kiri. CSS yang dijana menggunakan nilai darjah (cth. "linear-gradient(135deg, ...)") yang serasi dengan semua pelayar moden.

Hentian warna ialah warna tertentu pada kedudukan tertentu (0% hingga 100%) dalam gradien. Menambah hentian tengah pada 50% membolehkan anda mengawal warna titik tengah. Hentian pada kedudukan yang sama mencipta tepi keras — gradien bertukar tajam dari satu warna ke warna berikutnya tanpa peralihan.

Letakkan dua hentian warna berturutan pada kedudukan yang sama. Contohnya: hentian merah pada 50% dan hentian biru juga pada 50%. Gradien akan menunjukkan merah pepejal dari 0% hingga 50%, kemudian biru pepejal dari 50% hingga 100%, tanpa peralihan lancar. Digunakan untuk latar belakang berjalur dan reka bentuk seperti bendera.

Ya. Gunakan nilai rgba atau hsla dengan saluran alfa. Contohnya, rgba(255, 0, 0, 0) ialah merah telus dan rgba(255, 0, 0, 1) ialah merah pepejal. Gradien dari telus ke pepejal mencipta hamparan pemudaran dan gradien bahagian hero yang telus.

Ya. Gradien linear, radial dan konik disokong di semua pelayar moden (Chrome, Firefox, Safari, Edge). Gradien konik mempunyai sokongan yang sedikit lebih baharu tetapi telah disokong dengan baik sejak 2020. CSS menggunakan sintaks standard tanpa awalan -webkit- kerana ia tidak lagi diperlukan.

Matahari Terbit: linear hangat oren ke merah jambu. Lautan: linear biru gelap ke turkuois. Hutan: hijau ke hijau gelap. Matahari Terbenam: pepenjuru ungu ke oren. Neon: sian terang ke magenta. Pastel: merah jambu lembut ke lavender. Pratetap adalah titik permulaan — ubah warna dan sudut selepas memuatkannya.

Tidak. Semuanya berjalan secara tempatan dalam pelayar anda. Data gradien anda tidak pernah meninggalkan peranti anda.