Gradient Generator

Bumuo ng linear, radial, o conic na gradient, magdagdag ng mga color stop at i-set ang direksyon, pagkatapos ay kopyahin ang CSS sa isang click lang.

Uri ng gradient
Mga color stop
CSS
I-adjust ang mga stop at direksyon para hubugin ang iyong gradient.

Ang bawat gradient ay nire-render mismo sa iyong browser. Walang anuman sa mga inilalagay mo rito ang ina-upload sa BroBroGo.

FAQ

Ano ang pagkakaiba ng linear, radial, at conic na gradient?

Ang linear gradient ay nagtitimpla ng mga kulay sa isang tuwid na linya na itinuturo mo gamit ang anggulo. Ang radial gradient ay nagpapakalat sa mga ito palabas mula sa gitna sa hugis na bilog o ellipse. Ang conic gradient naman ay nagwawalis sa mga ito sa paligid ng gitna na parang color wheel.

Ano ang mga color stop?

Ang bawat color stop ay isang kulay na nakapako sa isang posisyon sa kahabaan ng gradient — 0% sa simula, 100% sa dulo. Iurong ang stop para baguhin kung saan pinakamatingkad ang kulay nito, o magdagdag ng higit pang stop para sa mas mayamang timpla. Maaari kang gumamit ng hanggang walo.

Paano ko kokontrolin ang direksyon?

Para sa linear o conic na gradient, itinatakda ng angle slider ang direksyon — ang 0° ay nakaturo sa itaas, ang 90° ay sa kanan. Ang radial na gradient ay walang anggulo; pumili na lang ng hugis na bilog o ellipse para baguhin ang pagkalat nito.

CSS Cubic Bezier GeneratorI-drag ang dalawang handle para hubugin ang easing curve, panoorin ang paggalaw ng dot kumpara sa steady na dot, at kopyahin ang cubic-bezier() value.Box Shadow GeneratorI-drag ang mga slider para humubog ng box-shadow, magpatong ng mga layer para sa lalim, at kopyahin ang natapos na CSS agad-agad.Border Radius GeneratorBilugin ang bawat sulok gamit ang mga slider, humubog ng mga organic blob gamit ang elliptical mode, at kopyahin ang CSS agad-agad.Flexbox GeneratorMag-set up ng flex container at ng mga item nito gamit ang mga visual na kontrol, panoorin ang reaksyon ng layout nang live, at kopyahin ang CSS sa isang click lang.CSS Grid GeneratorI-set ang iyong mga column at row, i-drag sa mga cell para maglagay ng mga item, at kopyahin ang grid CSS kasama ang katugmang HTML sa isang click lang.CSS clamp() CalculatorMaglagay ng sukat para sa maliliit at malalaking screen at kumuha ng fluid na clamp() value na maayos na nag-i-scale sa pagitan — para sa mga sukat ng font, padding, margin o gap.Color ConverterMag-convert ng mga kulay sa pagitan ng HEX, RGB, HSL, HSV, CMYK, at LAB — i-edit ang kahit anong field at ang iba ay mag-a-update habang nagpapatuloy ka.CSS Beautifier & MinifierI-reindent ang magulong CSS para madaling basahin, o i-minify para sa mas maliit na file — may safe mode na hindi kailanman nagbabago sa pagkakasunod-sunod ng iyong mga rule.Contrast CheckerMaglagay ng kulay ng text at background para makita ang WCAG contrast ratio at kung aling mga antas ng AA at AAA ang pumapasa.