Softonic

CSS-tekstschaduwgenerator

Stap 1 / 2
CSS genereren

Een text-shadow-declaratie op het oog opstellen in DevTools werkt wel, maar het wordt giswerk zodra je een zachte neumorfe gloed, een tweelaagse retro-slagschaduw of een strakke rand van 1 pixel op een grote kop nodig hebt. Met deze generator stel je de X-offset, Y-offset, vervagingsstraal en een RGBA-kleur in en kopieer je een kant-en-klare CSS-regel om te plakken.

Hoe je een tekstschaduw maakt

  1. 1

    Stel de offsets in

    X is de horizontale offset in pixels, Y is de verticale. Een positieve Y duwt de schaduw omlaag, een negatieve Y duwt hem omhoog.

  2. 2

    Kies de vervagingsstraal

    Een vervaging van 0 geeft een scherp silhouet; hogere waarden laten de schaduw vervagen. Typische zachte schaduwen gebruiken 4 tot 12 px vervaging.

  3. 3

    Kies een kleur

    Gebruik een RGBA-string om de transparantie aan te passen. `rgba(0,0,0,0.35)` is een veilige standaardwaarde voor subtiele diepte op lichte achtergronden.

  4. 4

    Kopieer de declaratie

    De tool genereert `text-shadow: Xpx Ypx Blurpx color;`, plaats deze in de bijbehorende selector in je stylesheet.

Tekstschaduwrecepten die er echt goed uitzien

Een tekstschaduw is de som van vier getallen en een kleur. Onthoud dat en je kunt vrijwel elk effect uit een tijdschrift of landingspagina namaken.

Spiekbriefje

Effect Declaratie
Subtiele diepte text-shadow: 0 1px 2px rgba(0,0,0,0.25);
Zachte slagschaduw text-shadow: 0 4px 12px rgba(0,0,0,0.35);
Rand van 1px text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
Retro dubbel text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
Neongloed text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

Meerdere schaduwen over elkaar leggen

text-shadow accepteert een lijst gescheiden door komma’s. De browser tekent volgens het schildersalgoritme, in de volgorde van de code: de laatste schaduw in de lijst komt achter alle andere te liggen. Gebruik dit om randen na te bootsen (vier harde schaduwen van 1px in de vier windrichtingen) of om diepte op te bouwen door één scherpe nabije schaduw en één diffuse verre schaduw te stapelen.

Wanneer je tekstschaduw beter weglaat

  • Bij heel kleine bodytekst maakt een vervaging boven 2px de glyphen wazig. Kies liever -webkit-font-smoothing en een sterker contrast.
  • Bij prestatiekritische hero-animaties gebruik je beter niet meer dan drie gestapelde schaduwen; elke laag dwingt de browser om de tekst opnieuw te rasteren.
  • Heb je een schaduw met een strakke offset op een complex pad nodig (bochten, rotaties), overweeg dan een SVG-<filter> met feDropShadow, die volgt de contour van de glyph nauwkeuriger.

Veelgestelde vragen

Volgens het ontwerp bevat de uitvoering slechts één schaduwlaag. Om effecten op te leggen, voer de generator meerdere malen uit en sluit de resultaten met komma’s aan elkaar aan, bijvoorbeeld text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

text-shadow volgt de glyphcontouren van de weergegeven tekst; box-shadow volgt de rechthoekige randbox van het element. Beide gebruiken vergelijkbare parameters, maar worden op volledig verschillende vormen gerasterd.

Browsers rasteren tekstschaduwen op het pixelraster van het apparaat. Een schaduw met vervaging 0 wordt op een 2x-scherm op subpixelposities weergegeven en kan er wat zacht uitzien. De vervaging verhogen naar 1 lost dat meestal op zonder het visuele gewicht te veranderen.

De waarden die je invoert, worden naar onze server gestuurd om de declaratie op te bouwen, maar ze worden niet opgeslagen of hergebruikt. In de meerstappenweergave reizen ze in de link tussen de stappen; in de enkelvoudige weergave wordt niets bewaard, ververs de pagina en alles is weg.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

HAR-bestandsviewer

Open HAR-netwerkopnamen lokaal, filter verzoeken, bekijk gemaskeerde headers en timing en exporteer opgeschoonde samenvattingen zonder upload.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

Tool beschikbaar in andere talen