Skapa vacker CSS-textgradient utan ansträngning
Skapa fantastiska övertoningstexteffekter för din webbplats
Kontroller för övertoning
.gradient-text { background: linear-gradient(to right, #4F46E5, #EC4899); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
Populära övertoningar
Så här använder du
Skriv in din text
Skriv in texten som du vill tillämpa övertoningen på i inmatningsfältet "Text".
Välj typ av övertoning
Välj mellan linjära, radiella eller koniska gradienttyper.
Justera riktning eller vinkel
För linjära övertoningar väljer du en riktning. För koniska gradienter, ställ in vinkeln.
Anpassa färger
Lägg till, ta bort eller justera färgstopp och deras positioner för att skapa önskad gradient.
Kopiera eller spara CSS
Kopiera den genererade CSS-koden eller spara den som en CSS-fil för att använda i dina projekt.
Om textövertoningar
Med CSS-textövertoningar kan du använda vackra, flerfärgade övertoningar direkt på texten. Denna effekt var en gång bara möjlig med bilder, men modern CSS gör det enkelt och effektivt.
Stöd för webbläsare:Textgradienter stöds i alla moderna webbläsare, inklusive Chrome, Firefox, Safari och Edge. För äldre webbläsare som Internet Explorer kommer texten att återgå till en enfärgad färg.
Tips för användning:Textövertoningar fungerar bäst med fet text och färgkombinationer med hög kontrast. Experimentera med olika gradienttyper och riktningar för att uppnå önskad effekt.
Related Tools
Skapa perfekta Flexbox-layouter
Visualisera, anpassa och generera CSS flexbox-kod med vårt intuitiva dra-och-släpp-gränssnitt.
Stylus till CSS-omvandlare
Omvandla din SCSS-kod till CSS. Snabbt, enkelt och säkert.
SCSS till CSS-omvandlare
Omvandla din SCSS-kod till CSS. Snabbt, enkelt och säkert.
Hex till Oktal
Konvertera hexadecimala tal till oktala utan ansträngning
Omvandlare av ytenhet
Konvertera mellan olika ytenheter med precision och lätthet
SHA-2 Hash-kalkylator
Generera SHA-2-hashvärden snabbt och enkelt