Bina gradien linear, radial dan conic dengan stop tanpa had, interpolasi sedar OKLCH dan output utiliti Tailwind v4. Pratonton langsung, 30+ praset, dalam pelayar anda.
Linear mengadun di sepanjang garis lurus pada sudut yang dipilih (0° = ke atas, 90° = ke kanan). Radial mengadun dari titik tengah ke luar — circle atau ellipse, dengan kata kunci saiz seperti farthest-corner. Conic berputar mengelilingi titik tengah — color stops berada pada sudut seperti jarum jam. Conic sangat sesuai untuk carta pai, papar dial dan latar belakang sintetik color-wheel.
Apabila beralih antara rona yang tidak analog — cth. biru → kuning, atau merah → hijau. Interpolasi sRGB lalai melalui titik tengah kelabu lumpur; OKLCH (CSS Color Module 4 in oklch) mengekalkan titik tengah yang terang kerana ia mengintepolasi dalam ruang seragam secara persepsi. Untuk gradien dua-stop antara rona yang serupa, perbezaannya kecil. Untuk gradien berbilang-stop atau julat-rona luas, OKLCH jauh lebih baik.
Linear / radial / conic, lancar OKLCH, sedar Tailwind — dengan beberapa sentuhan kecil yang menjadikannya menyeronokkan untuk digunakan.
Linear dengan sudut 0-360°, radial dengan circle/ellipse + saiz + kedudukan, conic dengan from-angle + kedudukan. Semuanya menghasilkan sintaks CSS Images Module Level 4 yang patuh standard.
Tambah stop pada sebarang peratus, seret penggelangsar kedudukan untuk menala, klik swatch untuk memilih warna atau tampal HEX. Stop disusun secara automatik pada output. Klik × untuk membuang (minimum 2 stop).
Tukar antara sRGB lalai dan interpolasi in oklch moden. OKLCH memberikan titik tengah yang lebih lancar secara persepsi — tiada jalur kelabu lumpur merentas lompatan rona. Berundur dengan baik pada pelayar yang belum menyokong CSS Color 4.
Tiga panel output dikemas kini secara langsung: CSS mentah (background-image: linear-gradient(...)), utiliti nilai-arbitrari Tailwind v4 (bg-[linear-gradient(...)]) dan petikan token reka bentuk JSON sedia untuk Style Dictionary atau Figma Tokens.
Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — klik untuk memuatkan dan menala. Setiap praset adalah titik permulaan berkualiti pengeluaran sebenar, bukan sekadar nama.
Pratonton dipaparkan dengan background-image asli supaya apa yang anda lihat adalah tepat seperti yang dihasilkan oleh helaian gaya anda. Setiap piksel berjalan secara setempat — buka DevTools → Network dan sahkan sifar permintaan keluar.
Empat langkah dari helaian kosong ke CSS, Tailwind atau JSON sedia pengeluaran.
Linear untuk latar belakang, pengepala, bahagian hero. Radial untuk lampu sorot, vignet, butang berkilau. Conic untuk carta pai, roda warna dan latar belakang sintetik bergaya. Tukar antara mereka dengan tab — color stops anda dikekalkan merentas pertukaran.
Klik swatch warna untuk membuka pemilih, atau tampal HEX terus ke dalam medan. Seret penggelangsar untuk menetapkan kedudukan stop 0-100%. Klik + Tambah stop untuk memasukkan stop baharu pada jurang terbesar (dengan warna titik tengah). Sehingga 12 stop secara keseluruhan.
Untuk linear, tetapkan sudut (0° menghala ke atas, 90° ke kanan). Untuk radial, pilih bentuk, kata kunci saiz dan kedudukan tengah. Untuk conic, tetapkan sudut permulaan. Tukar Interpolasi warna kepada OKLCH untuk titik tengah lancar secara persepsi merentas gradien berbilang-rona.
Tiga panel dikemas kini secara langsung: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (bentuk token reka bentuk). Gunakan ikon salin pada setiap satu, atau tekan Muat turun CSS untuk menyimpan fail gradient.css sedia dimasukkan ke dalam projek.
Empat senario biasa di mana alat pelayar mengutamakan privasi mengatasi membuka Figma + tapak gradien yang berasingan.
Pilih praset yang hampir dengan jenama anda, letakkan dua warna jenama anda ke dalam stop, tukar kepada interpolasi OKLCH untuk titik tengah yang bersih. Salin CSS, tampal ke dalam helaian gaya hero anda. Jumlah masa: di bawah 2 minit.
Bina gradien jenama 3-stop sekali, salin sebagai token reka bentuk JSON, letakkan ke dalam Style Dictionary / Figma Tokens. Sekarang setiap butang + kad pada setiap platform menggunakan gradien yang sama melalui rujukan. Kemas kini di satu tempat, tersebar ke mana-mana.
Gradien conic sintetik sangat sesuai untuk visual carta pai, dial kemajuan atau keadaan kilauan 'data-loading'. Pilih jenis conic, tetapkan from-angle, letakkan stop pada peratusan yang betul — matematik memadankan sudut 0-360° kepada kedudukan peratus dengan tepat.
Bina gradien, tetapkan nisbah aspek untuk dipadankan dengan sasaran anda (16:9 untuk slaid, 1:1 untuk IG, 3:1 untuk pengepala X), tangkap skrin pratonton. Atau salin CSS ke dalam fail HTML sekali pakai dan tangkap skrin dalam pelayar anda pada saiz piksel tepat yang anda perlukan.
Warna dan gradien anda tidak pernah meninggalkan peranti anda. Buka DevTools → Network dan anda akan melihat sifar permintaan keluar semasa sebarang operasi.
background-image CSS asli — jadi gradien yang dipaparkan padan tepat dengan apa yang akan dihasilkan oleh helaian gaya anda dalam pelayar pengguna anda.
Bacaan terpilih tentang gradien CSS, interpolasi OKLCH dan sistem token reka bentuk.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Linear mengadun di sepanjang garis lurus pada sudut yang dipilih (0° = ke atas, 90° = ke kanan). Radial mengadun dari titik tengah ke luar — circle atau ellipse, dengan kata kunci saiz seperti farthest-corner. Conic berputar mengelilingi titik tengah — color stops berada pada sudut seperti jarum jam. Conic sangat sesuai untuk carta pai, papar dial dan latar belakang sintetik color-wheel.
Apabila beralih antara rona yang tidak analog — cth. biru → kuning, atau merah → hijau. Interpolasi sRGB lalai melalui titik tengah kelabu lumpur; OKLCH (CSS Color Module 4 in oklch) mengekalkan titik tengah yang terang kerana ia mengintepolasi dalam ruang seragam secara persepsi. Untuk gradien dua-stop antara rona yang serupa, perbezaannya kecil. Untuk gradien berbilang-stop atau julat-rona luas, OKLCH jauh lebih baik.
Utiliti nilai-arbitrari yang anda boleh tampal terus ke dalam JSX / Blade / HTML: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. Tiada perubahan tailwind.config.js diperlukan; berfungsi pada mana-mana projek Tailwind 4. Jika anda lebih suka token warna bernama, salin CSS sebagai gantinya dan tukar secara manual.
Gradien linear dan radial telah disokong secara universal sejak 2014. Gradien conic dihantar dalam semua pelayar evergreen menjelang 2021. Kata kunci interpolasi in oklch disokong dalam Chrome 111+, Safari 16.2+, Firefox 113+. Jika anda perlu menyokong pelayar lama, gunakan interpolasi sRGB lalai — perbezaan visual paling penting untuk gradien berbilang-stop yang melompat rona.
Tidak. Penjanaan rentetan gradien, penyirian CSS / Tailwind / JSON dan pratonton langsung semuanya berjalan dalam JavaScript pada peranti anda. Buka DevTools → Network dan anda akan melihat sifar permintaan keluar semasa sebarang operasi. Tampal warna jenama, token dalaman — tiada apa-apa keluar dari komputer riba anda.