Box-Shadow & Border-Radius Generator

What is box-shadow?

The CSS box-shadow property adds a shadow behind an element, giving flat interfaces a sense of depth. It takes up to five values: horizontal offset, vertical offset, blur radius, spread radius, and a color, plus an optional inset keyword to draw the shadow inside the element instead of outside it. Adjust the sliders above and the live preview updates instantly, so you can see exactly how each value changes the shadow's appearance before copying the generated CSS.

What is border-radius?

The border-radius property rounds the corners of an element. You can round all four corners equally with one value, or set each corner independently for asymmetric shapes, useful for buttons, cards, avatars, and callout bubbles. Toggling off "Same value for all corners" reveals four independent sliders, one per corner, letting you build shapes like a card with only its top corners rounded, or a speech-bubble-style asymmetric shape.

A Worked Example: Reading the Generated CSS

With this tool's default slider values, an offset of 0px horizontal and 10px vertical, a 24px blur, 0px spread, an 18% opacity, and the default indigo color, the generator outputs box-shadow: 0px 10px 24px 0px rgba(42, 46, 90, 0.18); alongside border-radius: 14px;. Breaking that down: the shadow sits directly below the element (0px horizontal, 10px down), spreads softly outward over a 24px blur radius, doesn't grow or shrink beyond the element's edges (0px spread), and renders at 18% opacity so it reads as a gentle lift rather than a harsh outline, a common recipe for card-style UI components.

Box-Shadow Syntax Reference: Understanding Each Value

Each of the five box-shadow values controls a distinct aspect of the effect. Horizontal offset moves the shadow left (negative) or right (positive) of the element. Vertical offset moves it up (negative) or down (positive); most realistic shadows use a positive vertical offset, since light typically falls from above. Blur radius controls how soft or sharp the shadow's edge appears, a value of 0 produces a hard-edged shadow, while larger values spread the shadow into a soft gradient. Spread radius grows (positive) or shrinks (negative) the shadow's overall size independent of the element itself. The color, usually specified with an opacity component, determines the shadow's hue and how strongly it stands out against the background.

Common Box-Shadow Use Cases: Cards, Buttons, Modals

Different interface elements typically call for different shadow characteristics. Cards and panels generally use a soft, low-opacity shadow with a moderate vertical offset and generous blur, subtle enough to suggest elevation without drawing attention to itself. Buttons often use a smaller, tighter shadow that intensifies slightly on hover to reinforce interactivity. Modals and dropdown menus typically need a stronger, higher-opacity shadow with more blur, since they visually float above the rest of the page and need clearer separation from the content behind them. Matching the shadow's intensity to how far an element should appear to "float" above the page is the core design principle behind all of these variations.

Layering Multiple Shadows for Depth

CSS box-shadow supports comma-separated layers, letting a single element carry more than one shadow at once. A common technique combines a tight, darker shadow close to the element with a softer, lighter shadow spread further out, mimicking how real-world shadows have a sharper core and a softer, more diffuse edge further from the object. This generator produces a single shadow layer at a time; building a layered effect means generating each layer's values separately here and combining the resulting box-shadow declarations with commas in your stylesheet.

Performance Considerations: Box-Shadow vs Filter Drop-Shadow

While box-shadow is well supported and generally performant for static elements, it can become a bottleneck when animated on elements that move or resize frequently, since the browser must recalculate the shadow's shape on every frame. For shadows that need to follow an irregular or transparent shape, such as a logo with transparent edges, filter: drop-shadow() is the more appropriate tool, since box-shadow only respects an element's rectangular bounding box regardless of its visible content. For most static UI elements, cards, buttons, and containers, the difference is negligible and box-shadow remains the simpler, more widely used choice.

Design Trends Built on Box-Shadow

Several well-known design styles are built almost entirely around box-shadow behavior. Material Design, Google's design language, defines a system of elevation levels, each mapped to a specific shadow recipe, so that a card at "elevation 2" always uses the same shadow values across an entire application, creating visual consistency. Neumorphism, a softer, more skeuomorphic style that gained popularity for showcasing subtle depth, relies on two layered shadows on the same element, a light shadow offset toward the light source and a dark shadow offset away from it, to make flat elements appear gently embossed or pressed into the background. Both styles demonstrate how far a handful of numeric shadow values can go in defining an entire interface's visual identity.

Choosing Shadow Color for Light and Dark Themes

A shadow that looks natural on a light background often looks wrong on a dark one. On light backgrounds, a dark, desaturated color at low opacity, close to the default used by this generator, reads as a believable shadow. On dark backgrounds, the same dark shadow color becomes nearly invisible against an already-dark surface, so dark-theme interfaces typically either use a pure black shadow at higher opacity, or skip shadows in favor of a subtle lighter border or a faint glow to indicate elevation instead. If your site supports both light and dark themes, it's worth generating separate shadow values for each rather than reusing one set across both.

Accessibility Considerations for Shadows and Rounded Corners

Shadows and rounded corners are primarily visual polish, but they can still affect accessibility indirectly. A shadow used as the only indicator that an element is interactive, like a card that only appears clickable through a hover shadow, isn't accessible to keyboard users who can't hover, so interactive elements should also communicate their state through focus outlines or other visible changes. Rounded corners rarely cause accessibility issues on their own, but combining a large border-radius with a background image or icon can sometimes crop important visual content at the corners, worth double-checking on any element that isn't purely decorative.

Border-Radius Shortcuts: Pills, Circles, and Asymmetric Shapes

A few border-radius values produce recognizable, commonly used shapes. Setting the radius to 50% on a square element (equal width and height) produces a perfect circle, a common technique for avatars and icon buttons. Setting a very large radius, larger than half the element's shorter dimension, on a rectangular button produces a fully rounded "pill" shape often used for tags and call-to-action buttons. Independent per-corner values, available by unchecking "Same value for all corners" above, unlock more distinctive shapes: rounding only the top corners of a card, or using a large radius on one corner and none on the opposite corner for an asymmetric, hand-drawn feel.

Browser Support and Fallbacks

Both box-shadow and border-radius have been fully supported across all modern browsers, including mobile browsers, for many years, so there's generally no need for vendor prefixes or fallback code in new projects. The main compatibility consideration today is older versions of Internet Explorer, which either lacked support entirely or required a -webkit- or -moz- vendor prefix; since Internet Explorer no longer receives updates and represents a vanishingly small share of web traffic, most projects can safely rely on the unprefixed syntax this generator produces without any additional fallback styling.

Tips for Natural-Looking Shadows

• Keep opacity low (10-25%) for a subtle, realistic shadow rather than a harsh outline.
• A larger blur with a smaller offset tends to look softer and more modern than a sharp, tight shadow.
• Negative spread values pull the shadow inward, which is handy for a tighter glow effect around small elements.
• Match the shadow color to a darkened version of the background rather than pure black, it tends to look more natural and less like a flat gray smudge.
• Use inset shadows sparingly, mainly for pressed-button states or input fields, since they read as "recessed" rather than "elevated."
• Keep border-radius values proportional to element size, a large radius on a small button can look bloated, while the same value on a big card panel might barely be noticeable.

Frequently Asked Questions

Can I use multiple shadows on one element?

Yes, CSS box-shadow supports comma-separated shadow layers for more complex depth effects. This tool generates a single layer; you can combine outputs manually if you need layered shadows.

Does border-radius work on background images?

Yes, as long as overflow: hidden is set on the element or its container, background images and child content will be clipped to the rounded corners.

What's the difference between box-shadow and filter: drop-shadow?

box-shadow draws a shadow based on an element's rectangular box, ignoring transparency in its content. filter: drop-shadow follows the actual visible shape of the content, including transparent PNGs and SVGs, but is generally more demanding on rendering performance.

Can I animate box-shadow with CSS transitions?

Yes, box-shadow can be transitioned, but it's relatively expensive to animate since the browser recalculates the shadow's shape on every frame. For smoother animations, consider transitioning opacity on a separate pseudo-element shadow instead.

Why does my border-radius look square on one corner?

This usually happens when the element is smaller than expected or when overflow content pushes past the rounded edge. Make sure the element has explicit width and height, and that overflow: hidden is set if child content needs to respect the rounded corners.

Can border-radius create a perfect circle?

Yes, set border-radius to 50% on an element with equal width and height. A 50% radius on a square element rounds each corner enough that they meet in the middle, forming a perfect circle.