Build a layered text-shadow
Visual editor for CSS <code>text-shadow</code> with multi-layer support. Live preview with adjustable text color, size and background.
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
How to build a text-shadow
Stack one or more shadow layers, tune offset and blur, preview against your bg.
- 01
Add layers
Even one subtle layer often improves contrast over hero photos.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
layersOKLCHCSS Color 4perceptuallivelayers · color1 · sRGB2 2 4 rgba(0,0,0,.5)
loaded · normalisedOKLCH · ready - 02
Pick text & bg
Adjust text color, background, and font size for realistic preview.
Format conversion handles
hex,rgb(),hsl(),oklch(),color(display-p3 …)with proper gamut mapping when crossing colour spaces.previewhex · rgb · hslP3gamut-mappedlivepreview · optionslive · livewhite on dark
options applied · livelive - 03
Tune shadow
X/Y offsets and blur — use rgba for soft transparency.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
tuneWCAG 2.2APCAAA · AAAcontrastblur · converted4px · readyrgba(0,0,0,.5)
converted · liveWCAG-aware - 04
Copy CSS
Drop straight into your stylesheet.
Copy formats any swatch in the chosen syntax (
#aabbcc,rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.shipclipboardCSS varspalette JSONblobok · copiedready · donetext-shadow: …;
shipped · ready to shipsuccess
Colour work that survives accessibility audits
Use OKLCH for manipulation
OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.
Test against WCAG 2.2
4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.
Mind gamut clipping
P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.
Colour blindness affects 8%
Use the Color Blindness simulator to check critical UI before launch.
Don’t hardcode hex
Use CSS variables. Light/dark themes become trivial when colours are tokenised.
Dark mode isn’t inverted
Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.
When to use text-shadow
Hero text, captions over photos, headlines.
Hero text
Improve legibility of light text over photos. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.
WCAG 2.2 AACaptions
Add a soft drop-shadow under photo captions. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).
P3-awareHeadlines
Subtle elevation for poster-style headings. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.
perceptually-uniformGlow effects
Multi-layer shadows for neon glow text. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.
gamut-safeDecorative type
Letterpress / chiseled text effects. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.
a11y-readyCross-tool
Copy directly into CSS or Tailwind config. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.
design-tokenFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.