What is CSS box-shadow and how does it work?

box-shadow is a CSS property that adds shadow effects around an element's frame. You can create multiple shadows, control blur, spread, color, and position to achieve various visual effects like elevation, depth, glow, neumorphism, and Material Design shadows.

How do I create a box-shadow online?

Choose from 25+ presets (Material Design, Tailwind, Neumorphism, Glow) or create custom shadows. Adjust x/y offset, blur, spread, color, and opacity. Add multiple layers for complex effects. Export to CSS, Tailwind, SCSS, or React.

What do the box-shadow values mean?

The values are: x-offset (horizontal position), y-offset (vertical position), blur-radius (softness), spread-radius (size expansion), and color. Positive x goes right, positive y goes down. Optional "inset" keyword creates inner shadows.

What is blur radius in box-shadow?

Blur radius controls how soft and diffused the shadow appears. A value of 0 creates a sharp shadow, while higher values create softer, more spread-out shadows. Typical values range from 2px to 20px for subtle effects, 30px+ for dramatic effects.

What is spread radius in box-shadow?

Spread radius expands or contracts the shadow size. Positive values make the shadow larger than the element, negative values make it smaller. Useful for creating tight shadows, expanding glow effects, or simulating borders.

What is an inset shadow and when should I use it?

Inset shadows appear inside the element instead of outside, creating a pressed, recessed, or carved effect. Common uses: input fields, buttons in pressed state, neumorphic designs, and creating depth illusions.

Can I use multiple shadows on one element?

Yes! Separate multiple shadows with commas. They stack with the first shadow on top. Multiple shadows are essential for realistic effects like Material Design elevation (uses 2-3 shadows), neumorphism (light + dark shadows), and layered depth.

Should I use rgba or hex colors for shadows?

rgba is preferred because you can control opacity directly. Common shadow colors: rgba(0,0,0,0.1) to rgba(0,0,0,0.3) for dark shadows on light backgrounds. For colored glows, use the color with 0.3-0.5 opacity.

How do I create a glow effect with box-shadow?

Use a colored shadow with no offset (0 0) and high blur. Layer multiple shadows with increasing blur for realistic glow. Example: 0 0 10px rgba(59,130,246,0.5), 0 0 20px rgba(59,130,246,0.3), 0 0 40px rgba(59,130,246,0.1).

What is neumorphism and how do I create it?

Neumorphism (soft UI) uses two shadows - a dark one and a light one - on opposite corners to create a soft, extruded look. Works best on light backgrounds with subtle color differences. Example: 5px 5px 10px #d1d1d1, -5px -5px 10px #ffffff.

What are Material Design shadows?

Material Design uses multiple layered shadows to create realistic elevation. Each elevation level (1-24) has specific shadow values simulating light from above. Our presets include Material 1-4 elevation levels with proper shadow combinations.

Do shadows affect performance?

Complex shadows with large blur values can impact rendering performance, especially on mobile devices and during animations. Use shadows sparingly on frequently animated elements. Consider using will-change: transform for animated elements with shadows.

Can I export box-shadow to Tailwind CSS?

Yes! The tool generates Tailwind shadow classes (shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl) or custom shadow values for your tailwind.config.js. Also exports to SCSS variables and React inline styles.

Is box-shadow supported in all browsers?

Yes! box-shadow has excellent browser support in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. No vendor prefixes needed for current browser versions. Supported since IE9.

Is my box-shadow configuration secure when using this tool?

Yes! All box-shadow generation happens 100% in your browser using JavaScript. Your configurations are NEVER sent to any server, stored, or logged. The tool works completely offline for maximum privacy.

What is CSS box-shadow and how does it work?

box-shadow is a CSS property that adds shadow effects around an element's frame. You can create multiple shadows, control blur, spread, color, and position to achieve various visual effects like elevation, depth, glow, neumorphism, and Material Design shadows.

How do I create a box-shadow online?

Choose from 25+ presets (Material Design, Tailwind, Neumorphism, Glow) or create custom shadows. Adjust x/y offset, blur, spread, color, and opacity. Add multiple layers for complex effects. Export to CSS, Tailwind, SCSS, or React.

What do the box-shadow values mean?

The values are: x-offset (horizontal position), y-offset (vertical position), blur-radius (softness), spread-radius (size expansion), and color. Positive x goes right, positive y goes down. Optional "inset" keyword creates inner shadows.

What is blur radius in box-shadow?

Blur radius controls how soft and diffused the shadow appears. A value of 0 creates a sharp shadow, while higher values create softer, more spread-out shadows. Typical values range from 2px to 20px for subtle effects, 30px+ for dramatic effects.

What is spread radius in box-shadow?

Spread radius expands or contracts the shadow size. Positive values make the shadow larger than the element, negative values make it smaller. Useful for creating tight shadows, expanding glow effects, or simulating borders.

What is an inset shadow and when should I use it?

Inset shadows appear inside the element instead of outside, creating a pressed, recessed, or carved effect. Common uses: input fields, buttons in pressed state, neumorphic designs, and creating depth illusions.

Can I use multiple shadows on one element?

Yes! Separate multiple shadows with commas. They stack with the first shadow on top. Multiple shadows are essential for realistic effects like Material Design elevation (uses 2-3 shadows), neumorphism (light + dark shadows), and layered depth.

Should I use rgba or hex colors for shadows?

rgba is preferred because you can control opacity directly. Common shadow colors: rgba(0,0,0,0.1) to rgba(0,0,0,0.3) for dark shadows on light backgrounds. For colored glows, use the color with 0.3-0.5 opacity.

How do I create a glow effect with box-shadow?

Use a colored shadow with no offset (0 0) and high blur. Layer multiple shadows with increasing blur for realistic glow. Example: 0 0 10px rgba(59,130,246,0.5), 0 0 20px rgba(59,130,246,0.3), 0 0 40px rgba(59,130,246,0.1).

What is neumorphism and how do I create it?

Neumorphism (soft UI) uses two shadows - a dark one and a light one - on opposite corners to create a soft, extruded look. Works best on light backgrounds with subtle color differences. Example: 5px 5px 10px #d1d1d1, -5px -5px 10px #ffffff.

What are Material Design shadows?

Material Design uses multiple layered shadows to create realistic elevation. Each elevation level (1-24) has specific shadow values simulating light from above. Our presets include Material 1-4 elevation levels with proper shadow combinations.

Do shadows affect performance?

Complex shadows with large blur values can impact rendering performance, especially on mobile devices and during animations. Use shadows sparingly on frequently animated elements. Consider using will-change: transform for animated elements with shadows.

Can I export box-shadow to Tailwind CSS?

Yes! The tool generates Tailwind shadow classes (shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl) or custom shadow values for your tailwind.config.js. Also exports to SCSS variables and React inline styles.

Is box-shadow supported in all browsers?

Yes! box-shadow has excellent browser support in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. No vendor prefixes needed for current browser versions. Supported since IE9.

Is my box-shadow configuration secure when using this tool?

Yes! All box-shadow generation happens 100% in your browser using JavaScript. Your configurations are NEVER sent to any server, stored, or logged. The tool works completely offline for maximum privacy.

Box Shadow Generator

medium

Advanced CSS box-shadow generator with 25+ presets (Material Design, Tailwind, Neumorphism, Glow effects), multiple layers, color picker with opacity, customizable preview, and 4 output formats (CSS, Tailwind, SCSS, React).

Web Developmentcssbox-shadowshadowgenerator

100% Private - Runs Locally

How to Use

1Choose a preset from 25+ options (Material, Tailwind, Neumorphism, Glow)
2Or create custom shadows with multiple layers
3Adjust x/y offset, blur, spread, color, and opacity
4Toggle inset for inner shadows
5Customize preview shape, size, and colors
6Select output format (CSS, Tailwind, SCSS, React)
7Copy or download the generated code

Examples

Subtle Elevation

Input

Light shadow for cards

Output

box-shadow: 0 1px 3px rgba(0,0,0,0.12);

Material Design

Input

Multi-layer elevation

Output

box-shadow: 
  0 3px 6px rgba(0,0,0,0.15),
  0 3px 6px rgba(0,0,0,0.23);

Tailwind shadow-lg

Input

Large shadow preset

Output

box-shadow: 
  0 10px 15px -3px rgba(0,0,0,0.1),
  0 4px 6px -4px rgba(0,0,0,0.1);

Neumorphism

Input

Soft UI effect

Output

box-shadow: 
  6px 6px 12px rgba(0,0,0,0.15),
  -6px -6px 12px rgba(255,255,255,0.8);

Blue Glow

Input

Neon glow effect

Output

box-shadow: 
  0 0 10px rgba(59,130,246,0.5),
  0 0 20px rgba(59,130,246,0.3),
  0 0 40px rgba(59,130,246,0.1);

Inset Shadow

Input

Inner shadow

Output

box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

Frequently Asked Questions

Related Tools

View all

Border Radius Generator

Create CSS border-radius with individual corner control. Make circles, pills, rounded rectangles, and custom shapes with live preview.

CSS Gradient Generator

Create CSS gradients with multiple color stops. Support for linear, radial, and conic gradients with live preview and code export.

CSS Grid Generator

Advanced visual CSS Grid builder with layout templates, item placement, responsive breakpoints, and multi-format code export to CSS, Tailwind, SCSS, and HTML.