CSS Text Shadow Generator
Give headings depth, glow or an outline using nothing but text-shadow. Adjust offset, blur, colour and opacity, stack several layers for richer effects, try the presets and copy the declaration.
- Runs in your browser
- No sign-up
- Free to use
Text shadow
Shadow layers
Preview text
How to use CSS Text Shadow Generator
- Type your own preview text and choose a preset such as Neon or 3D retro.
- Adjust the X and Y offset, blur, colour and opacity of each shadow layer.
- Add layers to build glows, extrusions and outlines.
- Copy the CSS.
CSS Text Shadow Generator features
Stackable layers
Up to six shadows on the same text, written as one comma-separated value.
Effect presets
Soft shadow, neon glow, 3D retro, outline, fire and emboss.
Colour and opacity
Each layer has its own colour and transparency.
Your text, your size
Preview with your own words, font size, text colour and background.
Clean code
Zero values without units, one layer per line when there are several.
Text stays text
The effect is pure CSS, so the heading remains selectable, searchable and accessible.
When to use CSS Text Shadow Generator
- Making a heading readable on top of a photo.
- Neon and glow effects for dark-themed pages.
- Retro, layered display lettering for posters and banners.
- A thin outline around text that sits on a busy background.
CSS Text Shadow Generator FAQ
What do the text-shadow values mean?
Horizontal offset, vertical offset, blur radius and colour, in that order. Positive offsets move the shadow right and down. Unlike box-shadow there is no spread value and no inset keyword.
How do I make text glow?
Use shadows with no offset and a blur, in a bright colour, on a dark background. Layering two or three with increasing blur makes the glow fuller: a tight white one near the letters and wider coloured ones behind it, as in the Neon preset.
How is 3D text made with shadows?
By stacking sharp shadows, with zero blur, each one pixel or two further along a diagonal. Together they look like the side of extruded letters. Darker shades of the text colour give the most convincing result.
Can text-shadow create an outline?
Four sharp shadows, each offset by one pixel towards a different corner, form a thin outline. For thick or perfectly even outlines, the -webkit-text-stroke property, supported in all current browsers, is the better tool.
Does a text shadow improve readability on images?
A soft dark shadow behind light text helps separate letters from a varied background. It is a refinement, not a guarantee. For body text over photos, a semi-transparent overlay between image and text is more dependable.
Does text-shadow slow down a page?
A few shadows on headings are negligible. Large blurred shadows on long passages of text make scrolling heavier, especially on phones, so keep the effect to display text.
One property, many text effects
text-shadow draws copies of the letters behind the text, shifted and blurred as you specify. A single copy, slightly offset and softened, is the familiar drop shadow. The interesting effects come from using several copies at once, because the property accepts a comma-separated list and paints the shadows from the first, on top, to the last, at the back.
Three families of effects cover most uses. Soft shadows, with a small downward offset, some blur and low opacity, lift text off the page and help it stand out against a background. Glows have no offset at all; their blur radiates in all directions, and bright colours on a dark background give the look of neon tubes. Hard shadows have no blur; stacked at increasing offsets they produce extruded, retro lettering, and placed around the letters they produce an outline.
Colour choice does much of the work. A shadow in pure black often looks heavy. Using a darker shade of the background, or a transparent black, keeps it natural. For glows, the innermost layer should be nearly white and the outer layers saturated, since that is how real light sources appear to the eye. For 3D effects, each layer slightly darker than the last suggests depth.
Because the effect is applied to live text, nothing is lost. The words can be selected, translated, read by assistive technology and indexed by search engines, and they reflow when the screen changes. That is the main advantage over putting styled text into an image, which is still occasionally done for display headings and is never necessary for these effects.