Tools WebHub logo

CSS Box Shadow Generator — Visual Shadow Builder

Visually construct box shadows and automatically generate standard CSS or arbitrary Tailwind shadow classes.

Preview
CSS
box-shadow: 0px 12px 24px 0px rgba(15, 23, 42, 0.18);
Tailwind classes
shadow-[0px_12px_24px_0px_rgba(15,_23,_42,_0.18)] rounded-[24px]
Privacy note: All processing happens entirely in your browser. No data is sent to our servers.

About this tool

The CSS Box Shadow Generator creates box-shadow CSS code visually. Adjust the horizontal offset, vertical offset, blur radius, spread radius, and color using sliders and a color picker — the result updates live so you see exactly what your shadow will look like before copying the code.

The output is standard CSS compatible with all modern browsers and works directly in plain CSS, Tailwind CSS custom styles, styled-components, and CSS-in-JS libraries.

Common use cases

  • Card elevation in dashboard UIs
  • Primary button hover and focus states
  • Dropdown and modal depth cues
  • Neumorphic design experiments

How to use

  1. Adjust the horizontal offset (positive = shadow right, negative = left).
  2. Adjust the vertical offset (positive = shadow below, negative = above).
  3. Set blur radius — higher values create softer, more spread-out shadows.
  4. Set spread radius — positive expands the shadow, negative shrinks it.
  5. Pick a shadow color and set opacity.
  6. Toggle 'inset' for an inner shadow instead of outer.
  7. Copy the generated CSS and paste into your stylesheet.

This page is available at /tools/box-shadow-generator/.

Understanding the result

  • The box-shadow CSS property format: box-shadow: [inset] [x-offset] [y-offset] [blur] [spread] [color];
  • Example: box-shadow: 4px 8px 16px -2px rgba(0, 0, 0, 0.15); — 4px right, 8px below, 16px blur, -2px spread, black at 15% opacity.
  • Multiple shadows: stack shadows by separating them with commas. Example: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);

Related tools

Base64 Encoder & Decoder
Securely encode plain text into Base64 format, or decode Base64 strings back to their original readable state.
Border Radius Generator
Configure border radius attributes intuitively and generate the accompanying CSS or Tailwind classes.
Code Diff Viewer
Perform side-by-side textual comparisons to easily spot differences between two versions of code or text.
Color Picker & Converter
Select custom colors visually and convert seamlessly between HEX, RGB, and HSL color formats.
Cron Expression Explainer
Translate complex 5-field cron scheduling expressions into clear, plain English sentences.
CSS & JS Minifier
Compress your CSS and JavaScript code by stripping unnecessary whitespace and comments to optimize load times.

FAQ

What is the difference between blur and spread in box-shadow?

Blur controls how soft and feathered the shadow edge is — higher blur means a more diffuse shadow. Spread controls the size of the shadow itself before blurring — positive spread makes the shadow larger than the element, negative makes it smaller.

How do I create a subtle card shadow?

Use a small offset, moderate blur, negative spread, and low opacity. Example: box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1). This creates the clean card shadow used by most modern UI libraries.

How do I create an inset shadow?

Add the 'inset' keyword at the beginning: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1). Inset shadows appear inside the element rather than outside, useful for pressed button states and input field depth effects.

Can I add multiple shadows to one element?

Yes. Separate multiple shadow declarations with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08); This layered approach creates more realistic, natural-looking shadows.

Does box-shadow work on all HTML elements?

box-shadow works on any block or inline-block element. It does not work on elements using display: none. For images and other elements, use filter: drop-shadow() instead if you want the shadow to follow the element's actual shape rather than its bounding box.