jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-tools

Gratis CSS Text Shadow Generator

Ontwerp gelaagde CSS-tekstschaduwen met vijf samengestelde voorinstellingen en een aangepaste modus. Voorinstellingen zijn Neon Glow, Warm Glow, Long Shadow, Outline Text en Retro 3D.

Tool laden...

Wat is CSS Text Shadow Generator?

De CSS Text Shadow Generator is een visueel hulpmiddel voor de CSS text-shadow-eigenschap. In tegenstelling tot box-shadow ondersteunt text-shadow meerdere komma-gescheiden lagen.

Snel antwoord

Ontwerp gelaagde CSS-tekstschaduwen met voorinstellingen Neon Glow, Warm Glow, Long Shadow, Outline Text en Retro 3D. Pas offset, vervaging en kleur aan.

Last updated: 2026-06-11

Beperkingen

  • Aangepaste modus ondersteunt tot drie schaduwlagen.
  • Live voorbeeld gebruikt één lettergrootte.
  • Tekstschaduwen kunnen niet inset zijn.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Kies een voorinstelling: Neon Glow, Warm Glow, Long Shadow, Outline Text of Retro 3D. Of selecteer Aangepast.
  2. Configureer in Aangepaste modus tot drie schaduwlagen met X/Y-offset, vervagingsradius en kleur.
  3. Pas de voorbeeldtekst en lettergrootte aan.
  4. Kopieer de CSS text-shadow-eigenschap met alle lagen.

Waarvoor je het kunt gebruiken

  • Maak een neonreclame-effect voor een landingspaginatitel met de Neon Glow-voorinstelling.
  • Bouw een schoon omtrektekst-effect voor overlay-tekst op hero-afbeeldingen.
  • Ontwerp een retro 3D-titel voor een vintage blog.

Gebruik

Praktische voorbeelden

Voorbeeld

Neon-titel in donkere modus

Een ontwerper selecteert de Neon Glow-voorinstelling, verandert de gloedkleur van cyaan naar oranje (#f97316).

Voorbeeld

Omtrektekst voor hero-afbeelding

Een blogger gebruikt de Outline-voorinstelling voor een scherpe vierrichtingsomtrek. Witte tekst blijft leesbaar.

Veelgemaakte fouten

  • Te veel zware vervagingslagen gebruiken op kleine tekst.
  • Schaduwkleuren kiezen die bij de achtergrond passen.
  • Vergeten dat text-shadow-lagen van achter naar voren worden geschilderd.

Verificatie

  1. Selecteer de Neon Glow-voorinstelling. Controleer drie lagen met blauwe (#0ea5e9) kleuren.
  2. Schakel naar Aangepast, laag 1: X:3 Y:3 Blur:0 Color:rgba(0,0,0,0.2). Controleer één schaduw.

FAQ

Vragen over CSS Text Shadow Generator

Hoe maak ik een neon-teksteffect met CSS text-shadow?

Neon-tekst gebruikt meerdere schaduwlagen met dezelfde kleur bij toenemende vervagingsradii. Begin met de Neon Glow-voorinstelling.

Kan ik tekstschaduwen animeren voor een pulserend gloei-effect?

Ja, met CSS @keyframes. Genereer hier de basiswaarde en wikkel deze in een @keyframes-regel.

Waarom zien mijn tekstschaduwen er anders uit in verschillende browsers?

De weergave is consistent in moderne browsers, maar subtiele verschillen kunnen optreden bij grote vervagingsradii.

Gerelateerde tools

Meer css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool