CSS-generator for gradienttekst
Opprett tekststiler med fargeovergang, med direkte forhåndsvisning og CSS som kan kopieres.
Dette verktøyet behandler alle data lokalt på enheten din.
Inndata
Fargeovergang
deg
Typografi
px
Utdata
Forhåndsvisning
100%
CSS-kode
Les meg
Hvordan fungerer gradienttekst i CSS?
CSS har ingen egenskap for «tekstgradient». Det vanlige trikset er å bruke en gradient som bakgrunn for elementet, klippe bakgrunnen til bokstavenes form med background-clip: text og gjøre tekstfyllingen gjennomsiktig, slik at gradienten vises gjennom.
Beskrivelse av verktøyet
Skriv inn teksten din, velg en start- og sluttfarge, angi vinkelen, og verktøyet viser en forhåndsvisning i sanntid og gir deg CSS-koden du kan kopiere. Du kan også endre skrifttype, tykkelse og størrelse, slik at forhåndsvisningen samsvarer med det du vil bruke på siden din.
Den genererte regelen ser slik ut:
.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;
}Det faktiske resultatet inkluderer også skriftinnstillingene og reglene for linjebryting.
Funksjoner
- Lineær gradient med to farger og en vinkel fra 0 til 360 grader
- Kontroller for skrifttype, tykkelse og størrelse
- Forhåndsvisning i sanntid som du kan eksportere som bilde, samt CSS-kode som er klar til å limes inn
Kommentarer
Verktøyinfo
Opprettet
Sist oppdatert
Tags
cssgradienttextgeneratortext gradienttypographybackground clipcolordesignstylewebfrontend
Lignende verktøy
Generer splittkomplementærfarger fra en valgfri inndatafarge: to eller flere fargetoner jevnt fordelt rundt komplementærfargen på fargehjulet. Juster antallet farger og spredningsvinkelen.
Generer en innebygd bash- eller zsh-kommando som sender en Wake on LAN-magic packet fra Linux. Bruker Python 3, Perl eller bash /dev/udp, så du trenger ikke å installere wakeonlan eller etherwake.
Dra i de fire hjørnene på et bilde for å gi det en 3D-vinkel eller tilpasse det til et skilt, en skjerm eller en vegg. Nøyaktige perspektivberegninger, nedlasting i full størrelse og kjøring i nettleseren.
Bygg inn
Integrer dette verktøyet hvor som helst gratis. Trenger du hjelp? Sjekk ut vår guide.
Ansvarsfraskrivelse
Verktøyene som tilbys på dette nettstedet er utformet for å hjelpe brukere med å løse ulike problemer. Selv om vi gjør vårt beste for å sikre at verktøyene er nøyaktige og effektive, gir vi ingen garantier for at resultatene fra noe verktøy vil være 100 % nøyaktige eller feilfrie. Resultatene som genereres av disse verktøyene tilbys som de er, og bør brukes med forsiktighet. Vi anbefaler at brukere verifiserer viktig informasjon eller resultater med ytterligere ressurser eller profesjonell rådgivning, da vi ikke kan holdes ansvarlige for konsekvenser som følge av bruken av disse verktøyene. Ved å bruke dette nettstedet, godtar du å påta deg alle risikoer knyttet til nøyaktigheten og bruken av resultatene som tilbys.