CSS Gradient Generator

Paano gamitin ang CSS gradient generator

1. Pumili ng Uri ng gradient: Linear, Radial o Conic. Nag-a-update ang malaking preview sa itaas sa bawat pagbabago.
2. Sa linear na gradient, itakda ang Anggulo gamit ang slider o i-type ito sa degree (ang 90° ay mula kaliwa pakanan, ang 180° ay mula itaas pababa). Sa conic na gradient, ang anggulo ang pinagsisimulan ng pag-ikot.
3. Sa radial at conic na gradient, ilipat ang gitna gamit ang Gitna X at Gitna Y. Ang radial na gradient ay puwedeng Bilog o Ellipse (ang menu ng Hugis).
4. I-edit ang Mga color stop. I-click ang kahit saan sa bar para magdagdag ng stop doon na may kulay na mayroon na ang gradient sa puntong iyon, o gamitin ang Magdagdag ng stop para punan ang pinakamalawak na puwang. I-drag ang handle para ilipat ito. May hilera rin ang bawat stop kung saan mapipili ang kulay, makakapag-type ng anumang CSS color, maitatakda ang Posisyon (%) o maaalis ito gamit ang Alisin (laging may dalawang stop man lang ang gradient).
5. Opsyonal, lagyan ng tsek ang Umuulit, piliin ang Interpolation ng kulay, i-click ang Baligtarin para i-flip ang mga stop o ang Random na gradient para sa inspirasyon.
6. Kopyahin ang resulta mula sa CSS code gamit ang Kopyahin.

Keyboard: i-focus ang handle sa bar, saka gamitin ang mga arrow key para ilipat ito nang 1 % (10 % kapag may Shift), Home at End para tumalon sa mga dulo, at Delete para alisin ito.

Gumagana ito sa iyong browser. Walang ini-type mo na ipinapadala sa server.

Ang tatlong gradient function

• Ang linear-gradient() ay naghahalo ng mga kulay sa tuwid na linya. Ang linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) ay mula indigo sa kaliwa hanggang pink sa kanan. Pa-clockwise ang mga anggulo mula sa itaas: ang 0deg ay nakaturo pataas, ang 90deg ay pakanan.
• Ang radial-gradient() ay lumalabas mula sa isang gitnang punto. Ang radial-gradient(circle at 30% 40%, …) ay naglalagay ng gitna sa 30 % mula sa kaliwa at 40 % mula sa itaas. Umuunat ang ellipse kasabay ng kahon, nananatiling bilog ang circle.
• Ang conic-gradient() ay umiikot sa isang gitna na parang mga kamay ng orasan. Ang conic-gradient(from 0deg at 50% 50%, …) ay gumagawa ng color wheel, pie chart at spinner na epekto. Bahagi ng buong ikot ang mga posisyon ng stop.

Ginagamit ng opsyong Umuulit ang repeating-linear-gradient() at ang mga kapatid nito: inuulit ang pattern na tinukoy ng iyong mga stop hanggang mapuno ang kahon. Ilagay ang huling stop nang mas mababa sa 100 % (halimbawa 20 %) para makakita ng mga guhit o singsing.

Ang dalawang stop sa parehong posisyon ay gumagawa ng matigas na gilid sa halip na timpla, ganito ginagawa ang mga guhit at bandila. Pinananatili ng generator ang mga stop na nakaayos ayon sa posisyon sa code, gaya ng hinihingi ng CSS.

Interpolation sa sRGB o OKLCH

Bilang default, naghahalo ang mga browser ng kulay ng gradient sa sRGB. Sa pagitan ng dalawang matingkad na kulay, gaya ng asul at dilaw, madalas itong lumilikha ng mapusyaw na abo o maputik na gitna. Hinahayaan ka ng CSS Color Level 4 na pumili ng interpolation space: ang linear-gradient(90deg in oklch, …) ay naghahalo sa perceptual na OKLCH space at pinapanatiling matingkad ang gitna.

Sa OKLCH (mas makinis, may sRGB fallback), nagsusulat ang tool ng dalawang deklarasyong background: una ang klasikong sRGB, saka ang OKLCH. Ginagamit ng mga browser na sumusuporta sa interpolation space (Chrome at Edge 111+, Safari 16.2+, Firefox 127+) ang ikalawang linya; binabalewala ito ng mas luma at pinapanatili ang una.

Mga tip

• Tinatanggap sa mga field ng stop ang mga kulay na may transparency, halimbawa #00000080 o rgb(0 0 0 / 50%), na madaling gamitin para sa mga overlay sa larawan.
• Isinusulat ang code gamit ang background. Gamitin ang background-image kung hiwalay mong itinatakda ang ibang background property.
• Ang mga banayad na gradient (dalawang magkalapit na tint ng iisang kulay) ay kadalasang mas propesyonal tingnan kaysa sa mga timpla ng bahaghari.