OneTaskBy Tim King · Updated
CSS Text Shadow Generator
Drop, Long, Emboss and Retro Offset Presets Previewed on Your Own Text
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the CSS Text Shadow Generator works
This text shadow generator writes the CSS for you. text-shadow is the cheapest way to lift text off a background, glow a heading or fake a retro
print effect, and the syntax is simple enough that the hard part is choosing values. Type your own
text, pick a style, drag the offsets and blur, and copy the rule the preview is using.
How the text shadow generator works
A text-shadow is a copy of the glyph outlines, offset by an x and y distance, optionally blurred,
and painted in a colour behind the text. Several shadows can be listed with commas, and they stack in
order — the first is on top. There is no spread radius as in box-shadow, and no inset; everything
is built from offset, blur and colour, which is why multi-shadow lists are so common.
Custom. One shadow with your own offset, blur and colour. A 2–4px offset with a blur of about twice that and 30–50% black opacity is the standard "readable on a photo" shadow. Set blur to 0 for a hard edge.
Long. Twelve shadows, each one pixel further down and right than the last, with no blur, painted in the same colour. Together they form a solid extruded slab, the "long shadow" style from flat design. Extend the list for a longer slab, or use a lighter colour at each step for a fade.
Neon. Three centred shadows with no offset, at the blur value, twice it and four times it, in a saturated colour at high opacity. On a dark background with light text the glyphs appear to glow. Add a fourth shadow in pure white at a small blur for a hotter core.
Outline. Four unblurred one-pixel shadows in each diagonal direction. It is the classic way to
outline text without -webkit-text-stroke, and works in every browser. The corners are slightly
rounded and thicker outlines need more directions; for anything over 2px prefer -webkit-text-stroke
or paint-order on SVG text.
Emboss. A light shadow up-left and a dark shadow down-right, both one pixel and unblurred, on text the same colour as the background. The letters look pressed into the surface. Swap the two to get a raised effect.
Retro. A single hard offset shadow with no blur — the same colour block repeated behind the text, as on a 1970s poster or a comic title. Pair it with a heavy display face and a contrasting colour.
Colour and opacity. The tool writes the shadow colour as rgba() so the opacity is part of the
value. Semi-transparent black adapts to any background; a coloured shadow at full opacity is a
graphic choice that should match the palette. For dark text on light backgrounds keep the shadow
subtle or it reads as blur.
Performance. Text shadows are cheap to paint but expensive to animate when blurred, because every frame re-rasterises the glyphs. Animate opacity on a wrapper, or transition between two unblurred shadows, rather than animating the blur radius.
FAQ
Why does my text shadow look like the text is blurry?
The shadow is too close to the text colour with a small offset and a large blur. Increase the offset so the shadow separates, lower the opacity, or choose a colour with more contrast against the text so the glyph edge stays crisp.
Can I use text-shadow to outline text?
Yes, with four (or eight) unblurred one-pixel shadows in each direction, as in the outline preset. It
is the most widely supported method. For thicker or cleaner strokes, -webkit-text-stroke works in
all modern browsers despite the prefix, but it draws the stroke centred on the edge and eats into the
fill.
Does text-shadow affect layout or accessibility?
No. The shadow is painted outside the text's box without changing its size, and screen readers
ignore it. It can overflow a container with overflow: hidden, which clips the shadow, so leave some
padding.
How many shadows can I stack?
As many as you like; browsers handle dozens without trouble. The long-shadow preset uses twelve, and generated effects sometimes use a hundred or more. Each adds a paint pass, so keep it reasonable for text that animates or appears many times on a page.
Does the shadow work on gradient text?
Not well. Gradient text uses background-clip: text with a transparent colour, and the shadow shows
through the transparent fill. Put the shadow on a wrapper's pseudo-element with the same text, or use
filter: drop-shadow() on the element instead, which respects the visible pixels.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Neumorphism
Soft UI dual shadows from a single surface colour.
Contrast Checker
Check colour contrast against WCAG and APCA.
Drop Cap Generator
Style a magazine drop cap for the first letter and copy the CSS.
Gradient Text Generator
Fill headline text with a CSS gradient and copy the code.
Logo Reveal
Animate a wordmark reveal and copy the CSS.