Text Shadow Generator
Multi-layer text-shadow with live preview text and copy-paste CSS.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this text shadow generator
- Enter the preview text and pick a font size, text color, and backdrop so you can see contrast.
- Use the Shadow tabs to switch between layers; press "+ Add shadow" to stack additional layers.
- For each layer set X offset, Y offset, blur radius (px), and a color (hex or rgba for alpha).
- Watch the live preview update; you can layer up to as many shadows as the design needs.
- Press Generate CSS, then Copy CSS to grab the comma-joined `text-shadow` declaration.
About this text shadow generator
The text-shadow generator outputs a single CSS declaration — `text-shadow: x y blur color, x y blur color, …;` — that you can paste directly into a rule. Each layer keeps its own offsets, blur, and color, and the live preview composites them in the same order CSS does (later layers paint on top of earlier ones). The preview text sits at the top of the form so it paints first and becomes the LCP element, and uses the same live values you are editing so the preview never lies.
Worked example: set the preview text to "Toolnest", font size 64, text color #111827. Keep Layer 1 with x=2, y=2, blur=4, color=#00000080 — a subtle drop shadow. Add Layer 2 with x=0, y=0, blur=12, color=#6366f180 — a soft purple glow. The tool emits `text-shadow: 2px 2px 4px #00000080, 0px 0px 12px #6366f180;`. Add a third layer with x=-1, y=-1, blur=0, color=#ffffff to get a crisp outline highlight in the opposite direction. Everything happens in your browser; no values are sent anywhere.
FAQ
- What is each number in `text-shadow`?
- The three numeric values are offset-x, offset-y, and blur-radius (in that order). Positive offsets push the shadow right and down; negative offsets push it left and up. blur radius softens the shadow.
- Can text-shadow take a spread value like box-shadow?
- No — text-shadow is intentionally simpler than box-shadow. It supports only three numbers (x, y, blur) plus a color. There is no spread parameter and no inset variant.
- How do I create an outline using text-shadow?
- Stack four shadows with blur 0 and offsets of 1px in each of the four cardinal directions, all in the same color, e.g. `text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;`. The result reads like a 1px stroke around the glyphs.
- Is layered text-shadow expensive to render?
- A handful of layers is cheap. Dozens of layers on many animated elements can trigger paint cost on low-end devices — keep the layer count under five for animated text.
- Does this work for an SVG `<text>` element?
- Yes — `text-shadow` is a CSS property and applies to SVG text the same way. For SVG-only filters, use `<filter>` with `feGaussianBlur` plus `feMerge` for richer effects.