CSS Text Shadow Generator

This generator provides a visual way to preview and create text shadows using the CSS text-shadow property. Text shadows can be applied to any text on a webpage, allowing you to add depth, emphasis, or subtle visual effects that enhance readability and design.

Instead of manually experimenting with CSS values, this tool lets you adjust the shadow settings in real time and immediately see how they affect the text. Once you’re happy with the result, you can copy the generated CSS code and apply it directly to your project.

The text-shadow property requires four values to define the appearance of the shadow: Horizontal Length (controls the left or right position of the shadow), Vertical Length (controls the up or down position), Blur Radius (determines how soft or sharp the shadow appears), and Shadow Color (sets the color of the shadow).

By adjusting these values, you can create anything from subtle shadows for improved readability to bold, dramatic effects for headlines and decorative text.

Multiple shadows

Click a number to choose which shadow to edit. A new shadow starts as a copy of the one you are on. The first shadow is painted on top.

Shadow options

Horizontal length

3px

Vertical length

3px

Blur radius

2px

Shadow opacity

1

Shadow color

Presets

Preview settings

Preview text

Text color

Background color

Text size

56px

The text, its colors and its size are only for the preview. They are not in the code.

Shadow preview

Preview Text

CSS code

Copy & paste

Everything is worked out in your browser and nothing is uploaded.

How to use it

The css text shadow generator is a great tool to help you learn about using the css property text-shadow.

Set up the previewChoose the text color and background color, and type your own preview text, so the shadow is shown the way it will look on your page.
Move the shadowAdjust the horizontal and vertical lengths, anywhere from -20px to 20px, to place the shadow around the text.
Soften itThe blur radius goes from 0px, which is a sharp shadow, up to 25px. Lower the opacity to make the shadow lighter.
Pick the colorChoose any shadow color with the picker, or type a hex code.
Add more shadowsUse Add to layer extra shadows, or start from one of the presets such as Glow or Neon.
Copy the codeThe CSS updates as you go. Copy it and paste it into the rule for your text.

Good to know

Keep it readable

A light, soft shadow behind text usually helps it stand out. A heavy shadow can make small text harder to read.

Layers stack

With more than one shadow, the first one in the list is painted on top. Glows and outlines are made from several shadows together.

Colors with opacity

The code uses rgba(), so the opacity slider is part of the color. An opacity of 1 is fully solid.

Frequently asked questions

What do the values in text-shadow mean?

The first two are the horizontal and vertical lengths, the third is the blur radius, and the last is the shadow color. A positive horizontal length moves the shadow right, and a positive vertical length moves it down.

Can I use more than one shadow?

Yes. Use Add to make up to 10 shadows. In the CSS they are separated by commas.

How do I make an outline around text?

Try the Outline preset. It uses four sharp shadows, one in each diagonal direction, to draw a thin line around every letter.

Is anything uploaded?

No. The preview and the code are created in your browser.