CSS Text Shadow Generator

Set offset, blur and colour, stack layers, and preview on your own text. Copy the text-shadow CSS when it looks right. It runs in your browser.

This text shadow generator previews on live sample text instead of an abstract box, so you can read the effect exactly as it will ship. Type your own words, set the offset, blur and colour, and copy the text-shadow declaration. Used as a css text shadow maker it handles the simple drop shadow behind a heading, and by stacking layers it turns into glowing text css — a zero-offset blurred layer in a bright colour gives a neon glow. It is a straightforward text-shadow css tool that keeps the code and the preview in step.

Neon
CSS
text-shadow: 2px 2px 8px rgba(15, 30, 55, 0.55);

How it works

  1. 1

    Type your sample text

    Enter the actual word or phrase and pick a text colour, so the preview matches the headline you are styling.

  2. 2

    Shape the shadow

    Set X and Y offset, blur and colour. For a glow, set both offsets to 0, raise the blur and choose a vivid colour.

  3. 3

    Stack and copy

    Add more layers for a stronger glow or an outline look, then copy the text-shadow value in one click.

Instant & 100% private — nothing is uploaded

Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.

Frequently asked questions

How do I make glowing or neon text?
Set the offset to 0, push the blur up, and pick a bright colour at full opacity. Stack two or three of these layers with this text shadow maker to build the glowing text css look.
What is the difference from box-shadow?
text-shadow follows the letter shapes and has no spread value; box-shadow wraps the element’s box. This text-shadow css tool previews on real glyphs so you judge legibility, not a rectangle.
Can I add more than one text shadow?
Yes. text-shadow accepts a comma-separated list, and the generator stacks them for you. Layering is how you get outlines, double drops and neon effects.
How do I keep text readable over a photo?
A small dark shadow with some blur and moderate opacity lifts light text off a busy background. Nudge the blur and opacity in the preview until the sample stays crisp.
Does it work with any font?
The CSS applies to whatever font renders the element. The preview uses the site’s font, but the copied value behaves the same on your own typeface.

More tools

JSON Formatter & ValidatorBeautify, minify, validate JSON with a collapsible tree view.Code Formatter & MinifierPretty-print or minify JS, TS, CSS, HTML, JSON, SQL and more.YAML ⇄ JSON ⇄ TOML ConverterConvert config between YAML, JSON and TOML, both ways.JSON Schema Viewer & ValidatorRender a JSON Schema as a tree and validate data against it.Markdown Editor (Live Preview)Write Markdown with a live, side-by-side HTML preview.Mermaid Live EditorTurn Mermaid text into flowcharts and diagrams, live.

More from the Hivly network

Free sister tools on our other sites.

Color Palette GeneratorShuffle palettes with the spacebar, lock favourites, copy hex codes.Length ConverterMetres, feet, miles, inches, km and more, instantly.Word CounterCount words, characters, sentences and reading time live.