CSS-teksteffektgenerator
Skriv din egen tekst og forhåndsvis ekte neonglød, 3D-ekstrudering, boktrykkpreg, kontur og gradientfyll som CSS-effekter direkte, med parametere beregnet med ekte matematikk og en kopierbar CSS-blokk.
🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.
Resultat
De fleste CSS-teksteffektgallerier gir deg en fast forhåndsinnstilling: én neonglød, én 3D-ekstrudering, det er det du får. Denne generatoren bygger CSS-en fra dine parametere i stedet, på teksten du faktisk skriver. Velg neonglød, 3D-ekstrudering, boktrykkpreg/preget, kontur eller gradientfyll fra effektvelgeren, juster den effektens egne kontroller, så oppdateres den direkte forhåndsvisningen og den kopierbare CSS-blokken under ved hver endring.
3D-ekstruderingseffekten er den verdt å forstå: For valgt dybde (antall stablede lag) og vinkel blir lag i forskjøvet med i × cos(vinkel) horisontalt og i × sin(vinkel) vertikalt, beregnet i JavaScript med de ekte trigonometriske funksjonene – ikke hentet fra en oppslagstabell med forhåndsdefinerte vinkler. Ved 45 grader blir den horisontale og vertikale forskyvningen lik for hvert lag, fordi cosinus og sinus til 45° har samme verdi; drei vinkelskyveknappen og se hele stabelen med `text-shadow`-lag svinge rundt bokstavene i sanntid, der hvert lag blir litt mørkere enn det forrige for å simulere en opplyst 3D-flate.
Neonglød stabler fire `text-shadow`-lag med økende uskarphet i den valgte fargen din, med en valgfri flimmer: slå den på, så genereres og animeres en `@keyframes`-regel med en randomisert sekvens av opasitetsfall direkte, og en omfordelingsknapp lar deg kaste mønsteret på nytt uten å skrive en eneste keyframe for hånd. Konturtekst bruker `-webkit-text-stroke` for nettlesere som støtter det, pluss et ærlig 8-retnings `text-shadow`-reservemodus for de som ikke gjør det – begge linjene leveres i den kopierte CSS-en med en merknad om hvorfor. Gradientfyll klipper en `linear-gradient` til tekstformen med `background-clip: text`, nå en standardegenskap med bred støtte, men den eldre `-webkit-`-prefiksete linjen beholdes for eldre nettlesermotorer.
Alt gjengis lokalt i nettleseren din – ingen tekst du skriver sendes noen steder. Kopier den ferdige CSS-blokken, inkludert `@keyframes`-regelen når effekten krever det, rett inn i stilsettet ditt.