🎨

CSS Text Shadow Generator

Create stunning text shadow effects with multiple layers, colors, and blur options. Perfect for headlines, logos, and text styling.

Text Shadow Settings

Shadow Presets
Select a text shadow preset to apply predefined shadow effects, or reset to default values
Enter the text to display in the shadow preview
Set the main text color using the color picker or hex value input
Set the preview background color using the color picker or hex value input
Set the font size using CSS units like px, em, rem, %, etc.
Select the font weight for the text display

Shadow 1

Horizontal shadow offset from -20px to 20px
Vertical shadow offset from -20px to 20px
Shadow blur radius from 0px to 50px
Shadow opacity from 0% to 100%
Set shadow color using color picker or hex value

Live Preview

Sample Text
Live preview of text with applied shadow effects
Text shadow updated: 1 shadow layer applied
CSS Code:
.text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
Complete CSS code with text-shadow property

Text Shadow Value

Use this value for the text-shadow property
2px 2px 4px rgba(0, 0, 0, 0.5)

Shadow Breakdown

Shadow 1
H-Offset
2px
V-Offset
2px
Blur
4px
Color
#000000