CSS toolsText shadow generator
CSS Text Shadow Generator
Type your own text, set the offset, blur and colour, and this CSS text shadow generator shows the result at the size you choose and writes the text-shadow line. Start from a preset (soft, hard, glow or lift) and adjust it from there.
How to use the text shadow generator
Type the words you want to style, and set the text and background colours of your design.
Pick a preset or move the offsets and blur yourself.
Choose the shadow colour and its opacity.
Copy the text-shadow line. The font size and colours are only there to make the preview match your page.
What the text-shadow values mean
The CSS text-shadow property takes a horizontal offset, a vertical offset, an optional blur radius and a colour: text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.35). Positive offsets move the shadow right and down. A blur of zero gives a crisp copy of the letters; a bigger blur spreads them into a haze. With both offsets at zero and some blur, the shadow sits evenly around the text, which is how a glow is made.
Unlike box-shadow there is no spread value and no inset keyword. If you leave out the colour, the browser uses the text colour.
CSS text shadow effects to try
Soft: a small offset and a little blur in a dark, see-through colour. It separates a heading from a photo without looking like an effect. Hard: no blur and a solid colour, for a retro, printed look. Glow: no offset, a wide blur and a bright colour on a dark background, the base of a neon sign. Lift: a large vertical offset with a soft, faint shadow, as if the letters floated above the page.
For more depth, copy the output, add a comma and a second shadow with different values. Two glows in different sizes, or a hard shadow under a soft one, already look far more finished than a single layer.
Questions
- How do I add more than one text shadow?
- List them in one text-shadow rule, separated by commas. The first shadow is drawn on top. Stacking several shadows with growing blur gives a stronger glow; stacking hard shadows one pixel apart gives a 3D block effect.
- What is the difference between text-shadow and box-shadow?
- text-shadow follows the shape of the letters and has no spread value. box-shadow shades the rectangle of the element and can be inset. Use the box shadow generator for cards and buttons.
- How do I make a text outline with CSS?
- Four hard shadows, one in each direction, outline thin text: text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000. For thicker outlines, -webkit-text-stroke is cleaner and works in all current browsers.
- Is text with a shadow still readable?
- A soft shadow can lift light text off a busy photo and make it easier to read. Large blurs on small body text do the opposite. Check the contrast of the text colour against the background, not against the shadow.