How do I create an inner shadow?

For box shadows, enable the "Inset" option to create inner shadows that appear inside the element rather than outside. This is perfect for creating depth effects, pressed buttons, or input field styles. Text shadows cannot be inset.

Can I add multiple shadow layers?

Yes! Both box-shadow and text-shadow support multiple layers. Click 'Add Layer' to stack shadows for complex effects like glows, depth, or 3D appearances. Each layer can have different colors, blur, offset, and spread values.

What does the spread value do?

The spread value (only available for box shadows) expands or contracts the shadow before blurring. Positive values make the shadow larger, negative values make it smaller. This is useful for creating precise shadow shapes and glows.

How do I create a soft glow effect?

For a glow effect, use a box shadow with zero or small offset values (X: 0, Y: 0), high blur value (15-30px), positive spread (2-5px), and a bright color with some transparency. Add multiple layers for more intensity.

What are common shadow presets I should try?

Popular presets include: Material Design shadows (subtle with small blur), neumorphism (soft, large blur with light/dark pairs), card elevation (bottom-heavy shadows), and text outlines (multiple thin shadows for contrast).

CSS Shadow Generator

Create beautiful CSS box shadows and text shadows with multiple layers. Adjust blur, spread, color, and opacity with live preview.

Shadow Type

Shadow Presets

Soft Drop

2 shadows

Medium Drop

2 shadows

Large Drop

1 shadow

Inner Shadow

1 shadow

Pressed Button

1 shadow

Floating Card

2 shadows

Neon Glow

3 shadows

Neumorphism

2 shadows

Shadow States

Configure shadows for each interaction state. The preview shows transitions between states.

Preview

Background

Element

Text

Element

Hover and click the element to see state transitions

Generated CSS

.element {
  transition: box-shadow 0.3s ease;
}

.element {
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.element:hover {
  box-shadow: 0px 8px 12px -2px rgba(0, 0, 0, 0.15);
}

.element:active {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
}

Normal Shadows (1)

Drag to reorder

0px 4px 6px -1px

10%

Shadow Settings

X Offset

Y Offset

Blur Radius

Spread Radius

Shadow Color

Opacity

Inset Shadow

Create an inner shadow effect

Frequently Asked Questions

box-shadow adds shadows to element boxes (containers, divs, images), while text-shadow adds shadows to text only. Box shadows support spread and inset properties, while text shadows don't. Both support blur, color, and offset.

Related Tools

Enhance your workflow with these complementary design tools

CSS Gradient Generator

Create beautiful multi-layer CSS gradients with blend modes and live preview.

CSS Animation Builder

Build CSS keyframe animations with easing functions and timing controls.

Image Converter

Convert images between formats with quality control and optimization.