Nemokamas konverteris

CSS gradientas Generatorius

Vizualiai generuokite CSS gradientus naudodami tiesioginę peržiūrą. Kurkite linijinius, radialinius ir kūginius gradientus naudodami pasirinktinius spalvų sustojimus – nemokamai ir kliento pusėje.

Tiesioginė peržiūra
CSS išvestis
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Kampas (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

Apie šį įrankį

Sukurkite gražius linijinius ir radialinius CSS gradientus naudodami vaizdo redaktorių. Pasirinkite spalvas, sureguliuokite sustojimus, keiskite kryptį ar kampą ir realiuoju laiku pamatykite tiesioginės peržiūros atnaujinimą. Nukopijuokite sugeneruotą CSS kodą, įskaitant tiekėjo priešdėlius senesnėms naršyklėms, ir įklijuokite jį tiesiai į savo stiliaus lapą.

Kaip naudoti

  1. Pasirinkite gradiento tipą: linijinį arba radialinį.
  2. Pridėkite spalvų stoteles spustelėdami gradiento juostą ir pasirinkdami spalvas.
  3. Sureguliuokite gradiento kampą (tiesinį) arba padėtį (radialinį) naudodami valdiklius.
  4. Nukopijuokite sugeneruotą CSS kodą iš išvesties skydelio.

Dažnai užduodami klausimai

Ar CSS gradientai veikia visose naršyklėse?
Šiuolaikiniai CSS gradientai (linijinis gradientas, radialinis gradientas) palaikomi visose dabartinėse naršyklėse, įskaitant „Chrome“, „Firefox“, „Safari“ ir „Edge“. Įrankis gali pasirinktinai generuoti -webkit- priešdėlius senesnėms naršyklės versijoms.
Ar galiu sukurti kelių spalvų gradientus?
Taip. Pridėkite tiek spalvų sustojimų, kiek jums reikia. Taip pat galite reguliuoti kiekvienos stotelės padėtį, kad galėtumėte valdyti, kur susilieja spalvos. Tai leidžia sukurti sudėtingus vaivorykštės, saulėlydžio arba pasirinktinius prekės ženklo gradientus.
Kuo skiriasi linijiniai ir radialiniai gradientai?
Linijiniai gradientai perkelia spalvas tiesia linija (iš viršaus į apačią, iš kairės į dešinę, įstrižai arba bet kokiu kampu). Radialiniai gradientai perkelia spalvas į išorę nuo centrinio taško apskritimo arba elipsės formos.
Ar galiu naudoti gradientą kaip teksto foną?
Taip. Naudokite background-clip: tekstas su -webkit-text-fill-color: skaidrus, kad pritaikytumėte tekstui gradientą. Sukurtas CSS pateikia gradiento apibrėžimą – sujunkite jį su šiomis gradiento teksto savybėmis.