CSS Textskugggenerator
Gratis online textskugggenerator. Stapla flera skugglager med offset, oskärpa, färg och opacitet, prova förinställningar som Neon, 3D, Retro och kopiera CSS-koden direkt.
Vad är CSS-egenskapen text-shadow?
text-shadow lägger till skuggeffekter på textens glyfer. Varje skugga definieras av en horisontell offset, en vertikal offset, en valfri oskärperadie och en färg, och flera skuggor kan kombineras i ett enda kommaseparerat värde för rika effekter.
Hur fungerar flera skugglager?
Lagren ritas uppifrån och ned i deklarerationsordning, så den första skuggan i listan ligger överst. Denna generator låter dig lägga till, ta bort, aktivera och inaktivera lager, vart och ett med egen offset, oskärpa, färg och opacitet, för att stapla effekter som Neon eller 3D.
Vad betyder offset X, offset Y och oskärpa?
Offset X flyttar skuggan till vänster eller höger om glyferna, offset Y uppåt eller nedåt, och oskärperadien mjukar upp kanterna: 0 ger en hård kant som i Retro eller Kontur, större värden sprider färgen som ett glöd.
Hur skapar jag en neonljuseffekt?
Använd förinställningen Neon eller konfigurera flera lager med offset noll, samma starka färg och ökande oskärpevärden, t.ex. 0 0 3px, 0 0 8px och 0 0 20px. Staplade haloar efterliknar ljuset från en neonslang.
Påverkar text-shadow renderingsprestandan?
Några statiska lager är billiga, men text med många storslutna oskarpa skuggor är dyrare att rita om. Tunga skuggor på långa stycken eller kontinuerlig text-shadow-animation kan ge tappade bildrutor på svaga och mobila enheter; föredra korta rubriker, måttlig oskärpa eller animera opacitet istället.
Hur gör jag en skugga halvtransparent?
Varje lager har ett opacitetsreglage som omvandlar den valda färgen till rgba-notering, t.ex. rgba(0, 0, 0, 0.5). Halvtransparenta skuggor smälter naturligt med vilken bakgrund som helst, vilket Papper-förinställningen utnyttjar för en mjuk boktryckslook.
Vad är skillnaden mellan text-shadow och box-shadow?
text-shadow verkar på textens glyfformer och har inga spridnings- eller infällningsvärden, medan box-shadow omger vilken elements rektangulära låda som helst. De delar offset- och oskärpesyntaxen men kan inte ersätta varandra.
Vilka webbläsare stödjer text-shadow?
text-shadow stöds av alla moderna webbläsare, inklusive Chrome, Firefox, Safari, Edge och Opera, och har varit stabilt utan prefix i över ett decennium. Flerskiktade skuggor fungerar likadant överallt.
Skickas det jag skriver till en server?
Nej. Förhandsvisningstexten och alla lager du konfigurerar stannar i din webbläsare och CSS genereras lokalt på sidan. Inget skickas över nätverket, så verktyget fungerar även offline efter inläsning.
Hur man använder CSS Textskugggenerator
Designa CSS-textskuggor genom att stapla lager istället för att gissa en enda förskjutning. Varje ändring renderas på stor live-förhandsgranskningstext, och CSS:en genereras lokalt i din webbläsare.
- Skriv egna ord i fältet Förhandsgranskningstext för att testa effekten på verklig text.
- Prova en förinställning: Neon, Papper, 3D, Retro, Sken eller Kontur laddar färdiga lager.
- Justera varje lagers Förskjutning X, Förskjutning Y, Oskärpa, Färg och Opacitet med dess reglage.
- Använd Lägg till lager för att stapla fler skuggor, avbocka ett lager för att inaktivera det, eller ta bort det med soptunneikonen.
- Kopiera den genererade text-shadow-regeln och klistra in den i din stilmall.
Neonsken ser bäst ut med tre eller fyra lager av samma färg och växande oskärpa — håll förskjutningarna på noll och låt oskärmpan göra jobbet.
Relaterade verktyg
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Skapa vackra skuggor visuellt med justerbar offset, oskärpa, spridning, färg och infällning. Live förhandsgranskning och omedelbar kodkopiering.
- CSS-gradientgenerator Skapa fantastiska CSS-gradienter visuellt. Generera linjära, radiella och koniska gradienter med flera färgstopp, vinklar och positioner. Kopiera produktionsklar CSS-kod omedelbart.
- Snygga Bokstäver Generator Gratis generator för snygga bokstäver med 28 Unicode-stilar. Skapa fet, kursiv, gotisk och innanför cirkel-text för Instagram-bio, TikTok, WhatsApp och spelnamn.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 handtag eller välj en blob-förinställning för att skapa organiska CSS-former och kopiera koden direkt.
- Färgkonverterare Gratis online färgkonverterare. Konvertera HEX, RGB, HSL, HSV format omedelbart med visuell väljare. 100% privat, körs i din webbläsare.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunkterna på en interaktiv kurva, välj bland 18 förinställningar, titta på en loopande bollanimation och kopiera tidsfunktionen direkt.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Formge polygon-, cirkel-, ellips- och inset-former med dragbara punkter, liveförhandsvisning och CSS-kod med ett klick.
- CSS-förskönare Formatera och försköna CSS-kod direkt. Konvertera minifierad CSS till läsbar kod med anpassningsbara alternativ.