Pinakamahusay na Libre CSS Gradient Generator
Bumuo ng guhit at radial CSS gradients na may isang live na preview - kopyahin ang background code.
100% libre
Walang pag-signup
Walang watermark
✨
Pumunta Pro para sa pinakamahusay na AI modelo - imahe, video at chat - plus mas malaki uploads, prayoridad sa queue at walang paghihintay.
Mag-upgrade sa Pro
Pag-ibig Best.Free? Ibahagi ito
Paano ito gumagana
- Piliin ang isang uri. Pumili ng guhit o radial, at itakda ang anggulo para sa isang guhit gradient.
- Pumili ng mga kulay at huminto. Itakda ang dalawang o higit pang mga kulay at ang kanilang mga posisyon; magdagdag ng isang ikatlong stop sa Advanced na mga pagpipilian.
- Kopyahin ang CSS. Hit Copy CSS at i-paste ang background gradient sa iyong stylesheet.
Tungkol sa tool na ito
Bumuo ng isang CSS gradient sa pamamagitan ng mata sa halip ng pag-edit ng mga halaga blind. Maglipat sa pagitan ng linear at radial, i-drag ang anggulo para sa isang linear gradient, at pumili ng mga kulay at posisyon para sa hindi ba sa dalawang stop habang ang isang full-width preview bar updates live. Kopyahin ang resulta background ari-arian tuwid sa iyong stylesheet. Ang Advanced na mga pagpipilian magdagdag ng isang ikatlong kulay stop para sa mas mayaman blends at hayaan kang pumili ng isang bilog o tatsulok hugis para sa radial gradients. Ito ay lahat ng tumatakbo sa iyong browser.
Ano ang mga tao gamitin ito para sa
- Gumawa ng isang bayani o seksyon background gradient
- Lumikha ng isang pindutan o card gradient punan
- Paghalo ng dalawang o tatlong brand kulay makinis
- Bumuo ng isang radial spotlight o vignette epekto
Mga madalas itanong na katanungan
Ang isang guhit gradient blends kasama ang isang tuwid na linya sa anggulo na iyong pinili; isang radial gradient blends outward mula sa isang sentro ng punto bilang isang bilog o tatsulok.
Para sa isang guhit na gradient ang anggulo ay nagtatakda ng direksyon ng halo -0° pumunta sa ibaba-sa-top, 90 ° kaliwa-sa-kanan, at iba pa.
Ang bawat stop ay isang kulay na inilagay sa isang porsyento kasama ang gradient. Paglipat ng isang stop pagbabago kung saan ang kulay na nakaupo at kung paano matalim ang halo ay.
Oo. Buksan Advanced na mga pagpipilian upang magdagdag ng isang ikatlong stop kulay, ipinasok sa pagitan ng unang at huling para sa isang multi-kulay halo.
Hindi. Ang mga kulay at huminto ay nagiging isang CSS string lokal sa iyong browser.
Ganap na libre, walang account at walang limitasyon - isang client-side tool na walang anumang upang sukatin.
Oo. Ito ay tumatakbo sa iyong browser, kaya CSS Gradient Generator gumagana sa mga telepono at tablet pati na rin ang desktop - walang app upang i-install.
Karaniwan lamang ng ilang segundo para sa isang tipikal na file - CSS Gradient Generator nagsisimula sa trabaho ang sandali mo bigyan ito ng iyong input.
Ang paggamit ng casual ay walang limitasyon, sa ilalim ng isang malawak na fair-use cap na pinapanatili itong mabilis para sa lahat.
Ang lahat ng mga modernong browser - Chrome, Safari, Firefox at Edge. CSS Gradient Generator kailangang walang naka-install sa labas ng browser na iyong ginagamit.