Text Shadow Generator

How to use the Text Shadow Generator

1. 1Enter the offsets, the blur radius, the colour and the opacity.
2. 2Pick the units or options from the menus if the text-shadow CSS tool offers them.
3. 3Read the text-shadow CSS in the large result box.
4. 4Look at the extra rows for related figures.
5. 5Press Copy result to keep the answer.

When you need the text-shadow CSS

Designers use text shadows to make text stand out from a busy background, to create retro or neon looks and to add depth to headings. The live preview lets you judge legibility before you put the code in a style sheet.

You can combine several shadows by separating them with commas, for example a white glow plus a dark outline. Generate each one here and join them by hand in your CSS.

How the text-shadow CSS is worked out

The CSS form is text-shadow: x-offset y-offset blur colour. Positive x moves the shadow right and positive y moves it down. A blur of 0 gives a sharp shadow; larger values make it softer. The default of 2 pixels across, 2 pixels down, 4 pixels of blur and black at 50 percent opacity gives text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);, a subtle shadow for headings. Setting both offsets to 0 and a blur of 8 pixels with a bright colour gives a glow.

Every answer on this page comes from that one rule, so you can check any result by hand with a calculator. The figures shown underneath, such as other units, are conversions of the same answer.

• Offsets, blur, colour and opacity
• Live preview with your text
• Hex colour converted to rgba

Mistakes to avoid with text-shadow CSS

Heavy shadows can make text harder to read, especially for small sizes. Check contrast with the colour of the background. Enter the colour as a hex code with three or six digits, such as #000 or #FF8800.

On phone and computer

On a phone, type into the boxes one after another and read the text-shadow CSS underneath; Copy result puts it on the clipboard for a message or a note. On a computer the inputs sit on the left and the answer on the right, so you can change one figure and watch the text-shadow CSS move. The text shadow generator works the same on both. Style the box around the text with CSS Box Shadow Generator and Border Radius Generator, add a background with CSS Gradient Generator, and use Color Converter to turn a colour into hex, RGB or HSL.

Features

• Check contrast
• Zero offsets give a glow
• Combine shadows with commas
• Clear messages when the text-shadow CSS inputs make no sense
• Copy the result with one tap
• Private: nothing is uploaded

Frequently asked questions