How to use CSS Text Shadow Generator
- Set the first shadow’s horizontal and vertical offsets, blur and hex color.
- Enter sample text, optional extra layer rows and an outline choice.
- Check the previews and copy the generated CSS.
Example: CSS Text Shadow Generator
Add one soft shadow to sample text.
You add
Horizontal offset: 2 px. Vertical offset: 2 px. Blur: 4 px. Color: #000000. Extra layers: empty. Outline: off.
You get
The CSS contains text-shadow: 2px 2px 4px #000000.
Supported inputs and limits
Up to eight shadows in total, including the first shadow, extra rows and four outline shadows. Offsets range from -50 to 50 px and blur from 0 to 100 px. With the outline on, sample text color adapts to the shadow; copied CSS contains only shadows. Preview fonts and colors do not establish readability on your actual page.
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
Keep the letters readable
A shadow can make an edge more visible, but it does not guarantee readable text. Test the actual text color, background, size and font separately before adding the rule to a page.
Questions about CSS Text Shadow Generator
What does each number in a shadow row mean?
The first moves the shadow horizontally, the second vertically and the third sets blur, all in pixels. A negative offset moves left or up.
Does the outline use a font stroke?
No. It places shadows around the text. Review corners and thin letters in the font you will use.
Why does the preview differ on another computer?
The sample uses available local fonts. Letter shapes and font rendering can differ between systems.