Box Shadow Generator (CSS)

CSS box shadow generator (copy box-shadow code)

This box shadow generator helps you create clean, modern box-shadow styles for cards, sections, buttons, and UI components. Instead of guessing values, you can tune X/Y offset, blur, spread, and opacity, then copy the final CSS declaration. Multi-layer shadows are especially useful for “soft card” depth commonly used in modern dashboards and landing pages.

Want a step-by-step walkthrough with practical settings? Read the guide: Box Shadow Generator (CSS) – Create Soft Card Shadows.

How to use the box-shadow generator

1. Start from a preset — Soft card, Strong, Inset, or Glow — or keep the default and tune it yourself.
2. Adjust each layer’s X/Y offset (direction and distance), blur (edge softness), spread (shadow size), and color + opacity.
3. Tick Inset on a layer to draw the shadow inside the element — great for pressed buttons and inputs.
4. Add up to 4 layers with Add layer (first layer renders on top) or remove extras.
5. Tune the canvas: border radius, card color, and background color change the preview context.
6. Hit Copy CSS and paste the box-shadow declaration into your stylesheet.

Anatomy of a box-shadow value

Every shadow the tool generates follows the same grammar: box-shadow: offset-x offset-y blur-radius spread-radius color, with an optional inset keyword up front. A typical soft-card output looks like box-shadow: 0px 12px 30px -12px rgba(15, 23, 42, 0.18) — no horizontal shift, 12px down, 30px of blur, pulled in 12px by negative spread, in a dark navy at 18% opacity. Negative spread is the quiet hero of modern card shadows: it keeps large blurs from looking muddy.

Multiple layers are comma-separated and stack with the first on top — that’s how the “Soft card” preset combines a tight contact shadow with a wide ambient one, mimicking how real light behaves.

The four presets, decoded

• Soft card: two layers — a small, soft shadow hugging the card plus a larger, fainter one beneath. The default choice for dashboards, pricing cards, and modals.
• Strong: a single deeper shadow for elements that should feel lifted — floating action buttons, hero cards, prominent CTAs.
• Inset: shadow drawn inside the edges. Use for text inputs, pressed states, and “engraved” panels.
• Glow: a blue, zero-offset blurred shadow for dark interfaces — neon buttons, focus rings, and highlighted cards.

Design tips from real interfaces

• Keep opacity low: most premium UIs live in the 10–25% range. If you can clearly “see” the shadow color, it’s probably too strong.
• Two layers beat one heavy layer: a crisp near shadow plus a diffuse far shadow reads as realistic depth; a single dark blob reads as a mistake.
• Match shadow color to the scene: slightly tinted shadows (navy on light UI, brand color for glow) feel more designed than pure black.
• Buttons want restraint: small blur, modest spread — the shadow should lift the button, not detach it from the page.
• Mind dark mode: shadows nearly vanish on dark backgrounds; there, borders, glows, or lighter elevation tints do the job better.
• Performance: box-shadow is cheap to paint, but enormous blurs on many animated elements can still cost frames — prefer modest values on things that move.

Where the CSS goes

The Copy CSS button copies a complete declaration such as box-shadow: 0px 12px 30px -12px rgba(15, 23, 42, 0.18); Paste it into any CSS rule, a <style> block, or your Tailwind setup as a custom utility or arbitrary value. Reset restores the starting point whenever an experiment goes sideways.

Privacy note

This is a pure design utility — there’s nothing to upload. Every slider and color pick is processed locally in your browser, and the CSS never leaves your device until you copy it.

Practical tips (long-tail SEO)

If you’re trying to create a soft shadow CSS style for cards, keep opacity low (often 10–25%) and prefer two layers over one heavy shadow. For buttons, try smaller blur values and less spread. For input fields, an inset box shadow can create a clean “pressed” effect without adding extra borders.

FAQs