Text Shadow-generator
Text shadow-generatorn ställer in förskjutning, oskärpa, färg och opacitet för text-shadow med förhandsvisning i realtid och låter dig stapla flera skugglager för glöd-, kontur- och 3D-effekter.
Om verktyget
Text shadow-generatorn ställer in förskjutning, oskärpa, färg och opacitet för text-shadow med förhandsvisning i realtid och låter dig stapla flera skugglager för glöd-, kontur- och 3D-effekter.
Så använder du det
- Justera horisontell och vertikal förskjutning och oskärpa.
- Välj skuggans färg och opacitet, samt textens färg och storlek.
- Klicka på Add Layer för att lägga till ytterligare en skugga; Reset Layers börjar om.
- Klicka på Copy CSS.
Bra att veta
- Syntaxen för text-shadow är: offset-x offset-y blur-radius color.
- Till skillnad från box-shadow har text-shadow varken spread-värde eller nyckelordet inset.
- Flera skuggor separeras med kommatecken och målas med den första överst.
- En skugga utan förskjutning men med oskärpa ger en glödeffekt.
- Att stapla flera förskjutningar på 1 px ger ett 3D- eller boktrycksutseende.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Hur lägger jag till skugga på text i CSS?
Använd text-shadow, till exempel text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
Hur gör jag glödande text?
Använd noll i förskjutning med oskärpa och en klar färg, till exempel text-shadow: 0 0 8px #1db954; stapla lager för starkare glöd.
Kan jag använda mer än en textskugga?
Ja. Separera skuggorna med kommatecken; verktyget lägger till varje lager åt dig.
Påverkar text-shadow läsbarheten?
Diskreta skuggor kan förbättra läsbarheten på bilder, men kraftiga skuggor gör texten otydligare – kontrollera kontrasten med en kontrastkontroll.