CSS Gradient Generator
Ano ang CSS Gradient?
Ang mga CSS gradient ay nagpapahintulot sa iyo na magpakita ng maayos na paglipat sa pagitan ng dalawa o higit pang kulay nang hindi gumagamit ng mga file ng larawan. Mayroong tatlong uri: linear-gradient (sa kahabaan ng tuwid na linya), radial-gradient (nagmumula sa isang gitnang punto), at conic-gradient (umiikot sa paligid ng isang gitnang punto). Ang mga gradient ay ginagamit para sa mga background, button, overlay, at mga dekoratibong elemento.
Paano Gamitin ang CSS Gradient Generator
-
Pumili ng preset mula sa mga swatch o i-configure ang iyong sariling gradient.
-
Piliin ang uri ng gradient: linear, radial, o conic.
-
I-adjust ang anggulo (para sa linear/conic) o hugis (para sa radial).
-
I-edit ang mga color stop — baguhin ang mga kulay at posisyon (0–100%).
-
Magdagdag o mag-alis ng mga color stop kung kinakailangan.
-
Kopyahin ang CSS at i-paste ito sa iyong stylesheet.
Mga Madalas na Itinatanong
Paano gumagawa ng transparent gradient? Gamitin ang rgba() o hsla() na mga halaga ng kulay na may alpha channel na 0 para sa kumpletong transparency. Halimbawa, ang color stop na rgba(0,0,0,0) ay ganap na transparent na itim, kapaki-pakinabang para sa fade-out overlays sa mga larawan.
Paano lumilikha ng hard color stop (walang transition)? Maglagay ng dalawang color stops sa parehong posisyon — isa ay nagtatapos at isa ay nagsisimula sa puntong iyon. Halimbawa, ang pula 50%, asul 50% ay lumilikha ng instant na pagbabago mula pula hanggang asul sa midpoint na walang gradient transition.
Aling mga browser ang sumusuporta sa conic gradients? Ang conic gradients ay sinusuportahan sa lahat ng modernong browser (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Hindi ito sinusuportahan sa Internet Explorer.
Maaari ko bang gamitin ang maraming gradients sa parehong elemento? Oo. Ang CSS background ay tumatanggap ng comma-separated na listahan ng mga layer. Maaari mong i-stack ang mga gradients, pagsabihin ang mga ito sa mga larawan ng background, at kontrolin ang posisyon at laki ng bawat layer nang independente.
Keywords: CSS gradient generator, linear gradient, radial gradient, conic gradient, CSS background generator, tagapili ng kulay ng gradient, CSS gradient tool