100 Beautiful CSS Box Shadows

The Complete Guide to CSS Box Shadows

Shadows are one of the simplest ways to add depth, hierarchy, and polish to a web interface. This guide walks through everything you need to know about CSS box shadows — from basic syntax to advanced techniques used in material shadows, glassmorphism shadows, and neumorphism shadows — so you can go beyond copy-pasting and actually understand what each value does.

What is CSS Box Shadow?

The box-shadow property in CSS lets you attach one or more shadows to an element's box. Instead of relying on background images or extra markup, a single declaration can lift a button off the page, separate a card from its background, or simulate a soft ambient light source behind a modal. Because it's a native CSS property, box shadows are lightweight, easy to animate, and simple to theme with CSS variables.

CSS Box Shadow Syntax

The full syntax for box-shadow looks like this:

box-shadow: [inset] offsetX offsetY blurRadius spreadRadius color;

Only offsetX, offsetY, and color are commonly required — blur radius and spread radius are optional and default to zero. You can also chain multiple shadows by separating them with commas, which is how many of the modern CSS shadows in this collection achieve their layered, realistic depth.

Understanding Each Box Shadow Property

Horizontal Offset

The first length value controls how far the shadow moves left or right. Positive values push the shadow to the right; negative values push it left. Most soft shadows for cards and buttons keep this value close to zero for a balanced, centered look.

Vertical Offset

The second length value controls how far the shadow moves up or down. Positive values push the shadow downward, which is the most common choice since it mimics light coming from above — a pattern used across nearly every modern UI shadow style, from floating cards to dropdown menus.

Blur Radius

Blur radius controls how soft or sharp the shadow's edge appears. A value of 0 produces a solid, hard-edged shadow, while larger values spread the shadow into a soft gradient. Increasing blur is the fastest way to turn a harsh shadow into a soft shadow.

Spread Radius

Spread radius expands or contracts the shadow's size before the blur is applied. Positive values make the shadow larger than the element; negative values shrink it. Spread is especially useful for glow effects and colored shadows around buttons.

Shadow Color

Shadow color is usually defined with rgba() or hsla() so you can control opacity independently of hue. Low-opacity black is the default choice for neutral UI shadows, while brand-colored shadows with reduced opacity create the glowing, colored shadow effect popular in modern SaaS interfaces.

Inset Shadows

Adding the inset keyword flips the shadow to render inside the element's border instead of outside it. Inset shadows are the foundation of neumorphism shadows and pressed-button states, giving elements a carved-in, tactile appearance.

Multiple Box Shadows

You're not limited to one shadow per element. Comma-separated shadows let you layer a tight, dark shadow with a wider, softer one — the exact technique material shadows use to simulate both a direct light source and ambient occlusion in a single element.

CSS Box Shadow Examples

The gallery above includes 100 ready CSS box shadows across ten categories, so instead of tweaking values from scratch, you can browse soft shadows, colored shadows, and premium shadow examples, then copy the exact CSS or Tailwind class you need.

Modern UI Shadow Tips

Modern interfaces tend to favor subtlety over drama. Keep opacity low, blur generous, and offsets small unless you're specifically designing a floating or premium shadow for a hero element. Consistent shadow direction across a page also reinforces a believable, unified light source.

Material Design Shadows

Material Design shadows are built around elevation levels — the higher an element "floats," the larger and softer its shadow becomes. Two stacked shadow layers, one tight and dark, one wide and soft, are the classic recipe behind Google's Material shadow system.

Soft UI Shadows

Soft UI leans on gentle, low-contrast shadows with generous blur and minimal offset. This style works well for dashboards, SaaS onboarding flows, and any interface that wants to feel calm rather than punchy.

Glassmorphism Shadows

Glassmorphism pairs a translucent, blurred background (using backdrop-filter: blur()) with a soft, wide shadow underneath to make panels feel like frosted glass floating above the page. The shadow itself is usually a muted, slightly cool tone rather than pure black.

Neumorphism Shadows

Neumorphism combines two shadows on the same element — a light shadow offset toward the light source and a dark shadow offset away from it — on a background that matches the element's own color. The result is a soft, extruded, almost physical look built entirely from CSS shadows.

Shadows for Buttons

Button shadows CSS typically use a small offset and moderate blur to suggest a raised, clickable surface, often paired with a colored glow on primary actions to draw the eye. On press or active states, reducing the shadow simulates the button being pushed down.

Shadows for Cards

CSS card shadows should be just strong enough to separate the card from its background without competing with the content inside it. A soft, low-opacity shadow that intensifies slightly on hover is a reliable pattern for product cards, pricing tables, and blog previews.

Tailwind CSS Shadows

Tailwind CSS ships a set of default shadow utilities — shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, and shadow-2xl — covering most common use cases out of the box. When a design calls for something more specific, Tailwind shadows can be extended with arbitrary values, such as shadow-[0_10px_25px_rgba(59,130,246,0.35)], which is exactly how the Tailwind classes in this collection are built for colored and premium shadow effects.

CSS Box Shadow vs Filter Drop Shadow

box-shadow draws a shadow based on an element's rectangular (or rounded) box, while filter: drop-shadow() follows the actual visible shape of the content, including transparent regions in PNGs and SVGs. Use drop-shadow for icons and irregularly shaped graphics, and box-shadow for cards, buttons, and standard UI containers.

Browser Support

box-shadow is supported in every modern browser, including Chrome, Firefox, Safari, and Edge, with no vendor prefixes required. It has been part of the CSS specification for well over a decade, making it one of the safest visual properties to rely on in production.

Accessibility Tips

Shadows should never be the only signal for interactive states — pair them with color, underline, or border changes so the interface stays usable for people with low vision. Also ensure text sitting on top of a shadowed background maintains sufficient contrast against its surface.

Performance Tips

Avoid animating box-shadow directly on hover or scroll, since browsers must repaint the shadow on every frame. Instead, animate opacity on a pseudo-element that already has the shadow applied, or use transform for movement and let the shadow stay static.

Common Mistakes

The most common mistake is using pure black at high opacity, which makes shadows look heavy and dated. Other frequent issues include stacking too many shadows on one element, ignoring a consistent light direction across the page, and forgetting that large blur radii can affect layout if not accounted for with padding or overflow rules.

Best Practices

Keep a small, consistent set of shadow tokens across your design system rather than inventing a new shadow for every component. Use low opacity, favor blur over hard offsets, and reserve stronger shadows for elements that truly need to command attention, like modals and floating action buttons.

Conclusion

CSS box shadows are a small property with an outsized impact on how polished an interface feels. Whether you need soft shadows, material shadows, glassmorphism shadows, or neumorphism shadows, understanding offset, blur, spread, and color gives you full control — and the 100 ready CSS shadows above give you a fast, copy-paste starting point for any project.