Softonic

CSS Text Shadow Generator

Step 1 / 2
Generate CSS

Building a text-shadow declaration by eye in DevTools works, but it turns into guesswork the moment you need a soft neumorphic glow, a retro two-layer drop shadow or a crisp 1px outline on a hero heading. This generator lets you dial in X offset, Y offset, blur radius and an RGBA color, and copy a ready-to-paste CSS line.

How to build a text-shadow

  1. 1

    Set the offsets

    X is horizontal offset in pixels, Y is vertical. Positive Y pushes the shadow down, negative Y pushes it up.

  2. 2

    Choose the blur radius

    Blur 0 gives a hard silhouette; higher values fade the shadow out. Typical soft drops use 4–12px of blur.

  3. 3

    Pick a color

    Use an RGBA string so you can tune opacity. `rgba(0,0,0,0.35)` is a safe default for subtle depth on light backgrounds.

  4. 4

    Copy the declaration

    The tool outputs `text-shadow: Xpx Ypx Blurpx color;`: drop it into the matching selector in your stylesheet.

Text shadow recipes that actually look good

A text shadow is the sum of four numbers and a color. Remember that and you can recreate almost any effect in a magazine or landing page.

Cheat sheet

Effect Declaration
Subtle depth text-shadow: 0 1px 2px rgba(0,0,0,0.25);
Soft drop text-shadow: 0 4px 12px rgba(0,0,0,0.35);
1px outline text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
Retro double text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
Neon glow text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

Layering multiple shadows

text-shadow accepts a comma-separated list. Painters render right-to-left in source order, the last shadow in the list sits behind everything. Use this to fake outlines (four hard 1px shadows at the cardinal directions) or to build depth by stacking one sharp near-shadow and one diffused far-shadow.

When to skip text-shadow

  • On very small body text, blur above 2px will make glyphs look smudged. Prefer -webkit-font-smoothing and stronger contrast.
  • For performance-critical hero animations, avoid more than three stacked shadows; every layer forces the browser to re-rasterize the text.
  • If you need a shadow with a tight offset on a complex path (curves, rotations), consider an SVG <filter> with feDropShadow instead, it will follow the glyph outline more accurately.

Frequently Asked Questions

The output is a single shadow layer by design. To layer effects, run the generator several times and chain the results with commas, for example text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

text-shadow follows the glyph outlines of the rendered text. box-shadow follows the rectangular border box of the element. They take similar parameters but rasterize against completely different shapes.

Browsers rasterize text shadows against the device pixel grid. A shadow with blur 0 on a 2x display will render at sub-pixel positions and can look a touch soft. Bumping blur to 1 usually cleans it up without changing the visual weight.

The values you enter are sent to our server to build the declaration, but they are not stored or reused. In the multi-step view they travel in the page link between steps; on the single-page view nothing is kept, refresh the page and everything is gone.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.

Phone Validator

Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.

Tool available in other languages