Opret smukke CSS-tekstgradienter uden besvær

Omdan din CSS-kode til MINDRE med variabler, indlejring og mere.

Gradientkontroller

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

Sådan bruger

1

Indtast din tekst

Skriv den tekst, du vil anvende gradienten på, i " Tekst" indtastningsfelt.

2

Vælg forløbstype

Vælg mellem forløbstyperne Lineær, Radial eller Kegleform.

3

Juster retning eller vinkel

Vælg en retning For lineære forløb. For koniske gradienter skal du indstille vinklen.

4

Tilpas farver

Tilføj, fjern eller juster farvestop og deres placeringer for at oprette den ønskede farveforløb.

5

Kopier eller gem CSS

Kopier den genererede CSS-kode, eller gem den som en CSS-fil, der skal bruges i dine projekter.

Om tekst Forløb

CSS-tekstforløb giver dig mulighed for at anvende smukke, flerfarvede forløb direkte på tekst. Denne effekt var engang kun mulig med billeder, men moderne CSS gør det enkelt og effektivt.

Browserunderstøttelse:Tekstgradienter understøttes i alle moderne browsere, inklusive Chrome, Firefox, Safari og Edge. For ældre browsere som Internet Explorer vil teksten falde tilbage til en dækkende farve.

Tips til brug:Tekstgradienter fungerer bedst med fed tekst og farvekombinationer med høj kontrast. Eksperimenter med forskellige gradienttyper og retninger for at opnå den ønskede effekt.

Related Tools