CSS Tekst Schaduw Generator

Ontwerp visueel CSS text-shadow effecten met meerdere lagen. Pas offset, vervaging, kleur en transparantie aan. Kopieer de CSS direct.

Tool Lab

Voorbeeldtekst

Lettergrootte — 48px

Tekstkleur

Achtergrondkleur

Schaduwlagen (1)

X-verschuiving

Y-verschuiving

Vervaging

Kleur

Dekking — 30%

Gegenereerde CSS

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

Over deze tool

De CSS tekstschaduw-generator laat u visueel meerdere lagen tekstschaduwen samenstellen en direct de CSS-uitvoer ophalen. Elke laag heeft onafhankelijke besturingselementen voor X/Y-verschuiving, vervagingsstraal, kleur en dekking.

Dekking wordt toegepast als RGBA-alfakanaal, wat een vloeiende transparantie biedt zonder browserspecifieke hacks. De gegenereerde CSS werkt in alle moderne browsers.

Hoe te gebruiken

Selecteer een preset om te beginnen, of configureer lagen handmatig.
Typ voorbeeldtekst en pas lettergrootte en kleuren aan.
Voeg meer lagen toe met + Laag toevoegen voor complexe effecten.
Klik op CSS kopiëren om de text-shadow-declaratie direct in uw stylesheet te plakken.

Gebruiksscenario's

Frontend-ontwikkelaars maken hero-sectiekoppen met diepte en dimensie. Ontwerpers maken prototypes van teksteffecten direct in CSS. Marketingteams maken opvallende CTA-tekst met glow- en neoneffecten.

Veelgestelde vragen

Hoeveel lagen kan ik toevoegen? — Er is geen harde limiet. CSS ondersteunt elk aantal door komma's gescheiden text-shadow-waarden. In de praktijk dekken 1-4 lagen de meeste effecten.
Werkt text-shadow in alle browsers? — Ja. text-shadow wordt volledig ondersteund in alle moderne browsers sinds 2012.
Wat is vervagingsstraal 0? — Een scherpe schaduw zonder vervaging, handig voor retro- of contoureffecten.