CSS-teksteffekt-generator
Skriv din egen tekst, og se ægte neon-glow, 3D-ekstrudering, letterpress/emboss, outline og gradient-fyld som CSS-effekter live – med parametre beregnet af rigtig matematik og en kopierbar CSS-blok.
🔒 Behandles helt i din browser - intet, du indtaster her, bliver nogensinde uploadet.
Resultat
De fleste gallerier med CSS-teksteffekter giver dig en fast forudindstilling: én neon-glow, én 3D-ekstrudering – tag den, eller lad være. Denne generator bygger i stedet CSS'en ud fra dine parametre, på den tekst, du faktisk skriver. Vælg neon-glow, 3D-ekstrudering, letterpress/emboss, outline eller gradient-fyld fra effektvælgeren, juster effektens egne kontroller, så opdateres den levende forhåndsvisning og den kopierbare CSS-blok nedenfor ved hver ændring.
3D-ekstruderingseffekten er den, der er værd at forstå: For en valgt dybde (antal stablede lag) og vinkel bliver lag i forskudt med i × cos(vinkel) vandret og i × sin(vinkel) lodret – beregnet i JavaScript med de ægte trigonometriske funktioner, ikke aflæst fra en tabel med faste vinkler. Ved 45 grader bliver de vandrette og lodrette forskydninger ens for alle lag, fordi cosinus og sinus til 45° har samme værdi. Drej på vinkelskyderen, og se hele stakken af `text-shadow`-lag svinge rundt om bogstaverne i realtid – hvert lag bliver en smule mørkere end det foregående for at illudere en belyst 3D-overflade.
Neon-glow stabler fire `text-shadow`-lag med stigende sløringsradius i din valgte farve, med en valgfri flimmer-effekt: slå den til, så genereres og animeres en `@keyframes`-regel med en randomiseret sekvens af opacitetsdyk live, og en bland-knap lader dig få et nyt mønster uden at skrive en eneste keyframe i hånden. Outline-tekst anvender `-webkit-text-stroke` til browsere, der understøtter det, plus en ærlig 8-retnings `text-shadow`-fallback til dem, der ikke gør – begge linjer leveres i den kopierede CSS med en note om hvorfor. Gradient-fyld klipper en `linear-gradient` til tekstformen med `background-clip: text` – nu en standardegenskab med bred understøttelse – og lader den ældre `-webkit-` præfiksede linje følge med til ældre motorer.
Alt renderes lokalt i din browser – intet af den tekst, du skriver, sendes nogen steder hen. Kopier den færdige CSS-blok, inklusiv `@keyframes`-reglen, når effekten kræver det, direkte ind i dit stylesheet.