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.

Isinulat at sinuri ng editorial team ng BroBroGo.Huling na-update:

Ang Gradient Generator ay isang tool na nagbibigay-daan sa pagbuo ng CSS gradient sa pamamagitan ng pagpili ng uri nito, pag-adjust ng direksyon o hugis, at pagdaragdag ng hanggang walong color stops. Habang binabago ang mga setting, makikita ang isang live preview ng gradient at maaaring kopyahin ang nabuong CSS code sa isang click lang.

Ang bawat gradient ay nire-render mismo sa iyong browser. Walang anuman sa mga inilalagay mo rito ang ina-upload sa BroBroGo. Ang tool na ito ay kapaki-pakinabang para sa sinumang gustong gumawa ng CSS background, sa mga user na kailangang mag-adjust ng dalawang kulay at direksyon para sa gradient, o sa mga designer at front-end developer na kailangang mag-adjust ng uri, posisyon, at maramihang color stops ng isang gradient.

Mga Uri ng CSS Gradient at ang Kanilang Katangian

Ang CSS gradients ay nagbibigay-daan sa pagpapakita ng maayos na paglipat ng mga kulay sa web design. May tatlong pangunahing uri ng gradient na maaaring piliin sa interface sa ilalim ng "Uri ng gradient":

  • Linear: Ang uri na ito ay nagtitimpla ng mga kulay sa isang tuwid na linya, kung saan ang anggulo ang nagtatakda ng direksyon nito.
  • Radial: Ang uri na ito ay nagpapakalat ng mga kulay palabas mula sa gitna sa hugis na bilog o ellipse.
  • Conic: Ang uri na ito ay nagwawalis ng mga kulay sa paligid ng gitna na parang isang color wheel.

Para sa "Linear" at "Conic", ginagamit ang "Anggulo" upang kontrolin ang direksyon. Ang angle slider ay nagtatakda ng direksyon kung saan ang 0° ay nakaturo sa itaas at ang 90° ay nakaturo sa kanan. Ang radial na gradient ay hindi gumagamit ng anggulo; sa halip, pinipili ang hugis sa ilalim ng "Hugis" na maaaring "Ellipse" o "Bilog".

Ang Papel ng mga Color Stop sa Gradient

Ang bawat color stop ay isang kulay na nakapako sa isang partikular na posisyon sa kahabaan ng gradient. Ang posisyon ay sinusukat sa porsyento mula 0% hanggang 100%, kung saan ang 0% ay nasa simula at ang 100% ay nasa dulo.

Ang tool ay may mga sumusunod na panuntunan para sa pamamahala ng mga color stop:

  • Ang paunang gradient ay naglalaman ng dalawang color stops: #6366f1 0% at #ec4899 100%.
  • Maaari kang magdagdag ng hanggang walong color stops gamit ang "Magdagdag ng stop".
  • Kapag mayroon nang walong color stops, ang button na "Magdagdag ng stop" ay hindi na maaaring i-click o disabled.
  • Ang mga bagong idinagdag na color stop ay awtomatikong napupunta sa default na posisyon na 50%.
  • Ang bawat stop ay may kontrol para sa "Kulay ng stop" at "Posisyon". Maaari ding gamitin ang "Alisin ang stop" kung nais bawasan ang mga kulay.

Gabay sa Paggamit ng Gradient Generator

Upang makabuo ng gradient, sundin ang mga hakbang na ito gamit ang interface ng tool:

  1. Piliin ang Uri: Sa ilalim ng "Uri ng gradient", i-click ang "Linear", "Radial", o "Conic".
  2. Itakda ang Direksyon o Hugis:
    • Kung linear o conic ang pinili, i-adjust ang slider ng "Anggulo".
    • Kung radial ang pinili, piliin ang "Ellipse" o "Bilog" sa ilalim ng "Hugis".
  3. I-adjust ang mga Color Stop: Baguhin ang "Kulay ng stop" at "Posisyon" ng mga kasalukuyang stop. I-click ang "Magdagdag ng stop" kung kailangan ng karagdagang kulay, o "Alisin ang stop" upang magbawas.
  4. Kopyahin ang CSS: Suriin ang live preview sa screen. Kapag handa na, i-click ang button sa ilalim ng "CSS" na may label na "Kopyahin ang CSS". Pagkatapos itong i-click, ang teksto ng button ay magbabago at magiging "Copied".

Mga Madalas Itanong (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.

Ilan ang pinakamaraming kulay na maaari kong ilagay sa gradient? Maaari kang gumamit ng hanggang walong color stops sa tool na ito. Kapag naabot mo na ang limitasyon na walong kulay, ang button na "Magdagdag ng stop" ay hindi na magiging aktibo.

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.