Lengvai sukurkite gražų CSS teksto perėjimą

Kurkite nuostabius gradiento teksto efektus savo svetainei

Gradiento valdikliai

CSS gradiento tekstas
.gradient-text { background: linear-gradient(to right, #4F46E5, #EC4899); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

Populiarūs gradientai

Sunset
linear-gradient(to right, #FF512F, #F09819)
Magic
linear-gradient(to right, #4158D0, #C850C0, #FFCC70)
Ocean
linear-gradient(to right, #0093E9, #80D0C7)
Electric
linear-gradient(to right, #30CFD0, #330867)
Vaisių salotos
linear-gradient(to right, #FA709A, #FEE140)
Neon Glow
linear-gradient(to right, #00DBDE, #FC00FF)

Kaip naudotis

1

Įveskite savo tekstą

Įvesties lauke "Tekstas" įveskite tekstą, kuriam norite taikyti gradientą.

2

Pasirinkite gradiento tipą

Pasirinkite linijinio, radialinio arba kūginio gradiento tipus.

3

Sureguliuokite kryptį arba kampą

Tiesiniams nuolydžiams pasirinkite kryptį. Kūginiams gradientams nustatykite kampą.

4

Tinkinkite spalvas

Pridėkite, pašalinkite arba koreguokite spalvų stoteles ir jų padėtis, kad sukurtumėte norimą perėjimą.

5

Nukopijuokite arba išsaugokite CSS

Nukopijuokite sugeneruotą CSS kodą arba išsaugokite jį kaip CSS failą, kurį naudosite savo projektuose.

Apie teksto perėjimus

CSS teksto gradientai leidžia pritaikyti gražius, daugiaspalvius gradientus tiesiai tekstui. Šis efektas kažkada buvo įmanomas tik su vaizdais, tačiau šiuolaikinis CSS daro jį paprastą ir efektyvų.

Naršyklės palaikymas:Teksto gradientai palaikomi visose šiuolaikinėse naršyklėse, įskaitant "Chrome", "Firefox", "Safari" ir "Edge". Senesnėse naršyklėse, pvz., "Internet Explorer", tekstas vėl bus vientisos spalvos.

Naudojimo patarimai:Teksto perėjimai geriausiai veikia naudojant paryškintą tekstą ir didelio kontrasto spalvų derinius. Eksperimentuokite su skirtingais gradiento tipais ir kryptimis, kad pasiektumėte norimą efektą.

Related Tools