CSS-generator för text med färgövertoning
Skapa text med färgövertoning, se en förhandsvisning i realtid och kopiera CSS-koden.
Detta verktyg bearbetar all data lokalt på din enhet.
Inmatning
Färgövergång
deg
Typografi
px
Utdata
Förhandsvisning
100%
CSS-kod
Readme
Hur fungerar gradienttext i CSS?
CSS har ingen egenskap för ”textgradient”. Det vanliga knepet är att använda en gradient som elementets bakgrund, klippa bakgrunden efter bokstävernas form med background-clip: text och göra textens fyllning genomskinlig så att gradienten syns igenom.
Verktygsbeskrivning
Skriv in texten, välj en start- och en slutfärg och ange vinkeln. Verktyget visar en förhandsgranskning i realtid och ger dig CSS-kod att kopiera. Du kan också ändra typsnitt, vikt och storlek så att förhandsgranskningen motsvarar hur texten kommer att se ut på din sida.
Den genererade regeln ser ut så här:
.gradient-text {
background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}Den faktiska utdata innehåller även inställningar för typsnitt och regler för radbrytning.
Funktioner
- Linjär gradient med två färger och en vinkel från 0 till 360 grader
- Inställningar för typsnitt, vikt och storlek
- Förhandsgranskning i realtid som du kan exportera som en bild, samt CSS-kod som är redo att klistras in
Kommentarer
Verktygsinformation
Skapad
Senast uppdaterad
Taggar
cssgradienttextgeneratortext gradienttypographybackground clipcolordesignstylewebfrontend
Liknande verktyg
Generera delade komplementfärger från valfri färg: två eller fler nyanser som fördelas jämnt runt dess komplement på färgcirkeln. Justera antalet färger och spridningsvinkeln.
Skapa ett inbyggt bash- eller zsh-kommando som skickar ett Wake on LAN-magic packet från Linux. Använder Python 3, Perl eller bash /dev/udp, så du behöver inte installera wakeonlan eller etherwake.
Dra i fotots fyra hörn för att vinkla det i 3D eller passa in det på en skylt, skärm eller vägg. Exakta perspektivberäkningar, nedladdning i full storlek och körning i webbläsaren.
Bädda in
Bädda in det här verktyget var som helst gratis. Behöver du hjälp? Läs vår guide.
Ansvarsfriskrivning
Verktygen som tillhandahålls på denna webbplats är avsedda att hjälpa användare att lösa olika problem. Även om vi strävar efter att säkerställa att verktygen är korrekta och effektiva, garanterar eller lovar vi inte att resultatet från något verktyg är 100 % exakt eller felfritt. Resultaten som genereras av dessa verktyg tillhandahålls i befintligt skick och bör användas med försiktighet. Vi rekommenderar att användare verifierar viktig information eller resultat med ytterligare källor eller professionell rådgivning, eftersom vi inte kan hållas ansvariga för eventuella konsekvenser som uppstår vid användning av dessa verktyg. Genom att använda denna webbplats godkänner du att du tar på dig alla risker som är förknippade med noggrannheten och användningen av de levererade resultaten.