CSS Textskugge Generator

Designa CSS text-shadow-effekter visuellt med flera lager. Justera offset, oskärpa, färg och opacitet. Kopiera CSS direkt.

Tool Lab

Förhandsvisningstext

Teckenstorlek — 48px

Textfärg

Bakgrundsfärg

Skugglager (1)

X-förskjutning

Y-förskjutning

Oskärpa

Färg

Opacitet — 30%

Genererad CSS

text-shadow: 2px 2px 6px rgba(0,0,0,0.30);

Om det här verktyget

CSS-textskuggegeneratorn låter dig visuellt komponera flerlagers textskuggor och omedelbart få CSS-utdata. Varje lager har oberoende kontroller för X/Y-förskjutning, oskärperadie, färg och opacitet.

Opacitet tillämpas som RGBA-alfakanal, vilket ger jämn transparens utan webbläsarspecifika knep. Den genererade CSS fungerar i alla moderna webbläsare.

Hur man använder

Välj en förinställning för att börja, eller konfigurera lager manuellt.
Skriv förhandsvisningstext och justera teckenstorlek och färger.
Lägg till fler lager med + Lägg till lager för komplexa effekter.
Klicka på Kopiera CSS för att kopiera text-shadow-deklarationen direkt till ditt stilark.

Användningsfall

Frontend-utvecklare skapar hero-sektionsrubriker med djup och dimension. Designers prototypar texteffekter direkt i CSS. Marknadsföringsteam skapar iögonfallande CTA-text med glöd- och neoneffekter.

Vanliga frågor

Hur många lager kan jag lägga till? — Det finns ingen hård gräns. CSS stöder valfritt antal kommaseparerade text-shadow-värden. I praktiken täcker 1-4 lager de flesta effekter.
Fungerar text-shadow i alla webbläsare? — Ja. text-shadow har haft fullt stöd i alla moderna webbläsare sedan 2012.
Vad är oskärperadie 0? — En skarp skugga utan oskärpa, användbar för retro- eller kontureffekter.