CSS Gradient Generator
Idisenyo nang biswal ang background gradient at kopyahin ang handa nang gamiting CSS. I-drag ang color stops sa bar, i-click ang bar para magdagdag ng stop, baguhin ang angle o ang gitna, at gawing transparent ang mga kulay. May kasamang solid fallback color ang code para sa mga lumang browser.
Paano ito gamitin
- Piliin ang linear, radial o conic, o magsimula sa preset o random na gradient.
- I-click ang isang stop para i-edit ang kulay, opacity at posisyon nito; i-drag ito, o i-click ang bar para magdagdag pa.
- Kopyahin ang CSS at i-paste ito sa rule ng element.
Mga madalas itanong
Ano ang pagkakaiba ng linear, radial at conic gradient?
Ang linear gradient ay nagbabago ng kulay sa isang tuwid na linya ayon sa angle na pipiliin mo. Ang radial gradient ay kumakalat mula sa gitna sa hugis bilog o ellipse. Ang conic gradient ay umiikot sa isang gitna, parang kamay ng orasan, na kapaki-pakinabang sa color wheel at pie chart.
Gumagana ba ang CSS gradients sa lahat ng browser?
Oo. Gumagana ang linear, radial at conic gradient sa lahat ng kasalukuyang bersyon ng Chrome, Edge, Firefox at Safari nang walang prefix. Ang unang linya ng background ay payak na kulay, na ginagamit lang ng napakalumang browser.
Paano gumawa ng mga guhit (stripes)?
Maglagay ng dalawang stop na magkapareho ang kulay sa simula at dulo ng bawat guhit, para biglang magbago ang kulay sa halip na maghalo, at i-on ang Repeat. Halimbawa nito ang huling preset.
🏷️ Meta Tag Generator
🖼️ Open Graph Generator
🔗 UTM Builder
🔲 CSS Box Shadow Generator