Medyo nakakalito ang pagsulat ng gradient syntax nang manual: magkakaugnay ang angle, ang pagkakasunod-sunod ng stops, at ang percentage positions, kaya isang typo lang, sira na agad ang buong background. Pinapanatili ng generator na ito na magkatugma ang preview at ang code - kung ano ang nakikita mo, iyon din ang eksaktong CSS na kokopyahin mo. Client-side ito nang buo, kaya walang ini-upload kahit ano mang idinisenyo mo.
Libreng CSS Gradient Generator
Tumatakbo nang buo sa iyong browser - walang upload, walang sign-up.
Uri
Color stops
CSS code
Ano ang CSS gradient generator?
Ang CSS gradient generator ay isang visual na tool na gumagawa ng linear-gradient(), radial-gradient() o conic-gradient() code para sa iyo. Pumili ng kulay, i-drag ang posisyon ng bawat stop, itakda ang angle, at kopyahin ang CSS na handa nang idikit habang nakikita mo sa live preview kung paano talaga ito lalabas sa browser. Lahat ito nangyayari sa loob ng iyong browser.
Paano gamitin
- 1Pumili ng uri ng gradient. Pumili sa linear, radial, o conic. Ang linear ay may angle slider; ang radial ay may dagdag na shape (circle o ellipse) at position; ang conic ay may from-angle at position.
- 2Itakda ang mga color stop. I-click ang bawat swatch para pumili ng kulay at i-drag ang slider nito para igalaw ang stop sa gradient. Pwede kang magdagdag hanggang 8 stops, o bawasan hanggang 2 na lang.
- 3Ayusin ang direksyon. I-drag ang angle slider (0-360 degrees) o pumili ng position keyword. Nag-a-update ang preview nang live sa bawat pagbabago.
- 4Kopyahin ang CSS. Pindutin ang Copy para makuha ang background declaration, kasama na ang solid-color fallback, at i-paste ito sa iyong stylesheet.
Para kanino ito
- Mga front-end developer na kailangan ng background para sa hero section, card, o button at gustong makuha agad ang tamang linya ng
linear-gradient()nang hindi kinakabisado ang syntax. - Mga web at UI designer na tumutugma sa isang mockup: gawin muna ang gradient nang visual, tapos ibigay agad ang generated na CSS sa dev team.
- Mga gumagawa ng email at landing page na kailangan ng solid-color fallback para maayos pa ring lumabas ang disenyo sa mga lumang email client - awtomatiko na itong kasama sa output.
- Mga estudyanteng nag-aaral ng CSS na gustong makita kung paano nagbabago ang resulta kapag inayos ang angle, color stops, at uri ng gradient nang real-time.
FAQ
Libre ba itong CSS gradient generator?
Oo - 100% libre, walang sign-up, walang watermark, walang limitasyon. Gumawa ka ng kahit ilang gradient at direktang kopyahin ang CSS papunta sa iyong proyekto.
May ini-upload ba sa isang server?
Wala. Ginagawa at pinapakita ang gradient nang buo sa loob ng iyong browser gamit ang plain JavaScript. Walang kulay, code, o usage data na ipinapadala kahit saan.
Ano ang pagkakaiba ng linear, radial, at conic gradient?
Ang linear gradient ay pinaghahalo ang mga kulay sa isang tuwid na linya sa angle na napili mo. Ang radial gradient naman ay kumakalat papalabas mula sa isang gitnang punto sa hugis circle o ellipse. Ang conic gradient ay umiikot sa paligid ng gitnang punto, parang color wheel o pie chart.
Paano gumagana ang color stops sa CSS gradients?
Ang bawat stop ay may kaakibat na kulay at posisyon mula 0% hanggang 100% sa gradient line. Pinaghahalo ng browser nang malinaw ang mga magkatabing stop. Kapag inilagay mo ang dalawang stop sa parehong posisyon, magkakaroon ng matigas na gilid imbes na blend - kapaki-pakinabang ito para sa stripes o pie-chart effects.
Aling mga browser ang sumusuporta sa mga gradient na ito?
Lahat ng modernong browser - Chrome, Firefox, Safari, at Edge - ay sumusuporta sa unprefixed na linear-gradient() at radial-gradient(); suportado na rin ang conic-gradient() sa lahat ng lugar simula 2020. May kasama ring solid-color fallback ang kinopyang code para sa mas lumang browser.
Pwede ko bang gamitin ang gradient bilang kulay ng text?
Hindi direkta - ang gradient ay larawan, hindi kulay. Ilapat ang gradient bilang background-image sa text element, tapos idagdag ang background-clip: text at color: transparent para makita ang gradient sa bawat titik.
Bakit may banding na lumalabas sa gradient ko?
Lumalabas ang banding kapag ang dalawang malayong stop ay naghahalo sa mahabang range ng magkakatulad na kulay, kaya lumalabas ang 8-bit na color steps. Bawasan ito sa pamamagitan ng pagdaragdag ng gitnang color stop, pagpapaikli ng blend distance, o pagpili ng mga kulay na magkaiba hindi lang sa hue kundi pati sa lightness.