Libreng Converter

CSS Gradient Generator

Biswal na bumuo ng mga gradient ng CSS gamit ang live na preview. Gumawa ng mga linear, radial, at conic na gradient na may custom na color stops — libre at client-side.

Live Preview
CSS Output
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
anggulo (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

Tungkol sa tool na ito

Gumawa ng magagandang CSS linear at radial gradient na may visual editor. Pumili ng mga kulay, ayusin ang mga hinto, baguhin ang direksyon o anggulo, at tingnan ang live na preview update sa real time. Kopyahin ang nabuong CSS code — kasama ang mga prefix ng vendor para sa mas lumang mga browser — at direktang i-paste ito sa iyong stylesheet.

Paano gamitin

  1. Pumili ng uri ng gradient: linear o radial.
  2. Magdagdag ng mga color stop sa pamamagitan ng pag-click sa gradient bar at pagpili ng mga kulay.
  3. Ayusin ang gradient angle (linear) o posisyon (radial) gamit ang mga kontrol.
  4. Kopyahin ang nabuong CSS code mula sa output panel.

Mga madalas itanong

Gumagana ba ang mga gradient ng CSS sa lahat ng browser?
Ang mga modernong CSS gradient (linear-gradient, radial-gradient) ay sinusuportahan sa lahat ng kasalukuyang browser kabilang ang Chrome, Firefox, Safari, at Edge. Ang tool ay maaaring opsyonal na bumuo ng -webkit- prefix para sa mga mas lumang bersyon ng browser.
Maaari ba akong lumikha ng maraming kulay na gradient?
Oo. Magdagdag ng maraming color stop hangga't kailangan mo. Maaari mo ring ayusin ang posisyon ng bawat paghinto upang makontrol kung saan naghahalo ang mga kulay. Nagbibigay-daan ito para sa mga kumplikadong bahaghari, paglubog ng araw, o mga custom na gradient ng brand.
Ano ang pagkakaiba sa pagitan ng linear at radial gradients?
Ang mga linear gradient ay naglilipat ng mga kulay sa isang tuwid na linya (itaas hanggang ibaba, kaliwa pakanan, dayagonal, o anumang anggulo). Ang mga radial gradient ay naglilipat ng mga kulay palabas mula sa isang sentrong punto sa isang pabilog o elliptical na hugis.
Maaari ko bang gamitin ang gradient bilang background para sa teksto?
Oo. Gumamit ng background-clip: text na may -webkit-text-fill-color: transparent para ilapat ang gradient sa text. Ang nabuong CSS ay nagbibigay ng gradient definition — pagsamahin ito sa mga property na ito para sa gradient text.