Skip to content

CSS Box Shadow Generator with Layers

Design CSS box shadows with multiple layers, inset shadows, blur, spread and opacity, preview them on any background and copy the box-shadow CSS or a Tailwind class.

Presets

Code

How to use the box shadow generator

  1. Start from a preset such as Subtle, Large, Smooth (layered), Glow or Neumorphism.
  2. Adjust the selected layer with the offset, blur, spread and opacity sliders, or type exact pixel values.
  3. Use Add layer to stack shadows. Real-world shadows usually look best with two or more layers: a tight one for contact and a wide, soft one for depth.
  4. Change the background, box color and corner radius to match your design, then copy the CSS or the Tailwind class.

The box-shadow syntax

box-shadow: [inset] offset-x offset-y blur spread color;

  • Offset X and Y move the shadow right and down. Negative values move it left and up.
  • Blur softens the edge. Zero gives a hard, flat shadow.
  • Spread grows or shrinks the shadow before blurring. A negative spread keeps a large blur from showing at the sides.
  • Color is usually black or a dark tint of your brand color at low opacity, so the shadow takes on the hue of the page.
  • inset draws the shadow inside the element, for pressed buttons and input fields.

Several shadows are separated by commas and drawn in order, with the first one on top.

Tips for natural shadows

  • Keep opacity low (5–20%) and use layers instead of one dark shadow.
  • Use the same light direction everywhere: if cards cast shadows downwards, dropdowns and dialogs should too.
  • Larger elevation means a larger offset and blur. Dialogs float higher than cards, and cards higher than buttons.
  • Animate box-shadow sparingly. For hover effects on many items, a transform with a fixed shadow is cheaper to render.

Bootstrap and Tailwind CSS

Bootstrap 5 ships shadow-sm, shadow and shadow-lg; paste a custom value into your own class or the --bs-box-shadow variables. Tailwind CSS accepts the generated arbitrary value, for example shadow-[0_8px_30px_rgba(0,0,0,0.12)]. See shadows in context in our card components.

More CSS tools

CSS Gradient Generator: Linear, Radial & Conic
Create linear, radial and conic CSS gradients with multiple color stops, a live preview and ready-made presets, then copy the background CSS with a solid color fallback.
CSS Border Radius Generator & Blob Shape Maker
Generate CSS border-radius values for all corners, each corner or 8-value elliptical blob shapes in px, % or rem, with a live preview, presets and Tailwind output.
PX to REM Converter (and REM to PX)
Convert px to rem and rem to px with any root font size, turn every px value in a CSS snippet into rem at once, and look up a px to rem table with Tailwind spacing values.
CSS Grid Generator: Visual Layout Builder
Build CSS Grid layouts visually: set columns, rows and gaps, drag across cells to create items that span tracks, then copy the CSS, HTML or Tailwind classes.
CSS Flexbox Generator & Playground
Learn and generate CSS flexbox layouts: try flex-direction, wrap, justify-content, align-items and gap on live items, edit grow, shrink and order, and copy CSS, Tailwind or Bootstrap classes.
Glassmorphism CSS Generator (Frosted Glass)
Create a frosted glass effect with CSS: adjust blur, transparency, saturation, border and radius over colorful backgrounds and copy backdrop-filter CSS that works in every modern browser.
CSS Text Shadow Generator: Neon, 3D & Outline
Generate CSS text-shadow effects with multiple layers: soft shadows, neon glow, 3D, outline, retro and fire presets with a live preview of your own text and colors.
CSS Button Generator with Hover Effects
Design a custom CSS button: colors, font, padding, border radius, border, shadow, hover color and lift effect, with ready-made presets and copy-ready HTML and CSS including focus styles.
CSS Clip-path Generator: Polygon Shape Maker
Create CSS clip-path shapes: triangles, hexagons, stars, arrows, chevrons and more. Drag the polygon points to customize any shape and copy the clip-path CSS.
Cubic Bezier Generator: CSS Easing Functions
Design custom CSS easing with cubic-bezier(): drag the control points, try presets like easeOutCubic and easeOutBack, and compare your curve with ease in a live animation.
CSS Triangle Generator (Border & Clip-path)
Generate CSS triangles in eight directions with any width, height and color, using either clip-path or the classic border trick, for arrows, tooltips and decorative shapes.