Visual CSS Box-Shadow and Text-Shadow Generator

Visual CSS Box-Shadow Generator

Create beautiful shadow effects for your website elements

Preview

Text

Background:

Background Mode:

Element Color:

Custom Text:

Font Size: 36px

Presets:

Shadow Properties:

Horizontal: 5px

Vertical: 5px

Blur: 10px

Spread: 0px

Shadow Color: Opacity: 0.3

Inset Shadow

Box Properties:

Border Radius: 8px

CSS Code:

.element { box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.3); }

How to use this generator:

1. Choose between Box Shadow or Text Shadow using the tabs above
2. Adjust the sliders to customize your shadow effect
3. See the changes in real-time in the preview area
4. When you're happy with the result, click "Copy CSS" to copy the code
5. Paste the CSS code into your website's stylesheet