Lag vakker CSS-tekstgradient uten problemer

Lag fantastiske gradientteksteffekter for nettstedet ditt

Graderingskontroller

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

Populære gradienter

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)
Fruktsalat
linear-gradient(to right, #FA709A, #FEE140)
Neon Glow
linear-gradient(to right, #00DBDE, #FC00FF)

Hvordan å bruke

1

Skriv inn teksten din

Skriv inn teksten du vil bruke gradienten på i "Tekst"-inntastingsfeltet.

2

Velg graderingstype

Velg mellom forløpningstypene Lineær, Sirkulær eller Kjeglen.

3

Juster retning eller vinkel

Velg en retning for lineære graderinger. For koniske gradienter, still inn vinkelen.

4

Tilpass farger

Legg til, fjern eller juster fargestopp og deres posisjoner for å lage ønsket gradering.

5

Kopier eller lagre CSS

Kopier den genererte CSS-koden eller lagre den som en CSS-fil for bruk i prosjektene dine.

Om tekstgraderinger

CSS-tekstgradienter lar deg bruke vakre, flerfargede gradienter direkte på tekst. Denne effekten var en gang bare mulig med bilder, men moderne CSS gjør det enkelt og effektivt.

Nettleser støtte:Tekstgradienter støttes i alle moderne nettlesere, inkludert Chrome, Firefox, Safari og Edge. For eldre nettlesere som Internet Explorer vil teksten falle tilbake til en heldekkende farge.

Tips om bruk:Tekstgraderinger fungerer best med fet tekst og fargekombinasjoner med høy kontrast. Eksperimenter med forskjellige gradienttyper og retninger for å oppnå ønsket effekt.

Related Tools