CSS Tekstskyggegenerator
Gratis online tekstskyggegenerator. Stabl flere skyggelag med forskydning, sløring, farve og gennemsigtighed, prøv forudindstillinger som Neon, 3D, Retro og kopier CSS-koden med det samme.
Hvad er CSS-egenskaben text-shadow?
text-shadow tilføjer skyggeeffekter til tekstens glyffer. Hver skygge defineres af en vandret forskydning, en lodret forskydning, en valgfri sløringsradius og en farve, og flere skygger kan kombineres i én kommasepareret værdi for rige effekter.
Hvordan fungerer flere skyggelag?
Lagene tegnes nedefra og op i deklarationsrækkefølge, så den første skygge på listen ligger øverst. Denne generator lader dig tilføje, fjerne, aktivere og deaktivere lag, hvert med egen forskydning, sløring, farve og gennemsigtighed, for at stable effekter som Neon eller 3D.
Hvad betyder forskydning X, forskydning Y og sløring?
Forskydning X flytter skyggen til venstre eller højre for glyfferne, forskydning Y op eller ned, og sløringsradien blødgør kanterne: 0 giver en hård kant som i Retro eller Kontur, større værdier spreder farven som en glød.
Hvordan laver jeg en neonlyseffekt?
Brug forudindstillingen Neon eller konfigurer flere lag med nul forskydning, samme stærke farve og stigende sløringsværdier, fx 0 0 3px, 0 0 8px og 0 0 20px. Stablede haloer efterligner lyset fra et neonrør.
Påvirker text-shadow renderingens ydeevne?
Et par statiske lag er billige, men tekst med mange store uklare skygger er dyrere at tegne igen. Tunge skygger på lange afsnit eller konstant text-shadow-animation kan give tabte frames på svage og mobile enheder; foretræk korte overskrifter, moderat sløring eller animér gennemsigtighed i stedet.
Hvordan gør jeg en skygge halvgennemsigtig?
Hvert lag har en gennemsigtighedsskyder, der omdanner den valgte farve til rgba-notation, fx rgba(0, 0, 0, 0.5). Halvgennemsigtige skygger blander sig naturligt med enhver baggrund, hvilket Papir-forudindstillingen bruger til et blødt bogtrykslook.
Hvad er forskellen på text-shadow og box-shadow?
text-shadow virker på tekstens glyfformer og har ingen sprednings- eller indsatte værdier, mens box-shadow omgiver ethvert elements rektangulære boks. De deler forskydnings- og sløringssyntaksen, men kan ikke erstatte hinanden.
Hvilke browsere understøtter text-shadow?
text-shadow understøttes af alle moderne browsere, herunder Chrome, Firefox, Safari, Edge og Opera, og har været stabilt uden præfiks i over et årti. Skygger med flere lag fungerer ens overalt.
Bliver det, jeg skriver, sendt til en server?
Nej. Forhåndsvisningsteksten og alle de lag, du konfigurerer, forbliver i din browser, og CSS genereres lokalt på siden. Intet sendes over netværket, så værktøjet virker også offline efter indlæsning.
Sådan bruges CSS Tekstskyggegenerator
Design tekstskygger i CSS ved at stable lag i stedet for at gætte én enkelt forskydning. Hver ændring renderes på stor live-forhåndsvisningstekst, og CSS-en genereres lokalt i din browser.
- Skriv dine egne ord i feltet Forhåndsvisningstekst for at teste effekten på rigtig tekst.
- Prøv en forudindstilling: Neon, Papir, 3D, Retro, Glød eller Kontur indlæser færdige lag.
- Juster hvert lags Forskydning X, Forskydning Y, Sløring, Farve og Gennemsigtighed med dets skydere.
- Brug Tilføj lag til at stable flere skygger, fjern flueben ved et lag for at deaktivere det, eller slet det med skraldespands-ikonet.
- Kopiér den genererede text-shadow-regel og indsæt den i dit stylesheet.
Neonglød ser bedst ud med tre eller fire lag af samme farve og voksende sløring — hold forskydningerne på nul, og lad sløringen gøre arbejdet.
Relaterede værktøjer
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Opret smukke skygger visuelt med justerbar forskydning, sløring, spredning, farve og indsat. Live forhåndsvisning og øjeblikkelig kodekopiering.
- CSS-gradientgenerator Opret fantastiske CSS-gradienter visuelt. Generer lineære, radielle og koniske gradienter med flere farvestop, vinkler og positioner. Kopier produktionsklar CSS-kode øjeblikkeligt.
- Fed Tekst Generator Gratis generator til fed tekst med 28 Unicode-stile. Lav fed, kursiv, gotisk og cirklet tekst til Instagram-bio, TikTok, WhatsApp og spelletalte.
- Border-radius Generator Gratis kreativ border-radius-generator online. Træk i 8 håndtag eller vælg en blob-forudindstilling for at skabe organiske CSS-former og kopiere koden med det samme.
- Farvekonverter Gratis online farvekonverter. Konverter HEX, RGB, HSL, HSV formater øjeblikkeligt med visuel vælger. 100% privat, kører i din browser.
- CSS Easing-generator Gratis online CSS easing-generator. Træk cubic-bezier-kontrollpunkterne på en interaktiv kurve, vælg mellem 18 forudindstillinger, se en loopende boldanimation og kopiér tidsfunktionen med det samme.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Design polygon-, cirkel-, ellipse- og inset-former med trkbare punkter, live forhåndsvisning og CSS-kode med ét klik.
- CSS-forskønner Formatér og forskøn CSS-kode øjeblikkeligt. Konverter minifieret CSS til læsbar kode med justerbare muligheder.