← All text tools

CSS text shadow generator

Glow, neon, 3D and long text shadows with a live preview.

  • Free
  • No sign-up
  • Works on any device

About CSS text shadow generator

Create glowing, neon, retro 3D and long diagonal text shadows with live preview. The text-shadow property takes x offset, y offset, blur and colour, and accepts several comma-separated layers, which is how neon glows are built. Keep contrast in mind so the text itself stays easy to read.

How to use CSS text shadow generator

  1. Type your sample text and choose a style such as glow, neon, 3D or long.
  2. Adjust offset, blur and colour with the controls.
  3. Copy the text-shadow CSS.

Why use this tool?

Also known as

Frequently asked questions

How do I make neon text in CSS?

Stack several text-shadow layers of the same bright colour with growing blur values, such as 0 0 5px, 0 0 10px and 0 0 20px, on a dark background.

Is glowing text readable?

Strong glows can blur the letters. Use a dark background, a light text colour and a modest blur so the shape of each letter stays clear.

How do I stack several text shadows?

Separate each shadow with a comma in one text-shadow line. Neon and 3D effects are made by layering many shadows with growing offsets or blur.

Is CSS text shadow generator free?

Yes. CSS text shadow generator on Toolipedia is free to use, with no sign-up and no watermark.

Is it safe to use?

Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.

Does it work on my phone?

Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.

Do I need an account?

No. Just open the page and use the tool. There's no sign-up and no email needed.

Can I put CSS text shadow generator on my own website?

Yes. Use the Embed on your site button under the tool to copy a short piece of code and paste it into your page. It is free, needs no account, and the tool keeps working inside your page.

Related tools