CSS Shadow & Border Visual Designer
Visually design box shadows and border radius with a live preview and copy-ready CSS.
Interactive Client Prototype Sandbox
box-shadow: 0px 12px 24px -4px rgba(0, 0, 0, 0.12); border-radius: 16px;
Disclaimer: This free tool is provided “as is,” without warranties of any kind, and is for general informational purposes only — not professional, legal, financial, medical, tax, or engineering advice. Results may contain errors; verify anything important independently and use at your own risk. We accept no liability for any loss or damage arising from its use. See our Terms of Use for details.
Step-by-Step Guide
Use the sliders to adjust the shadow properties in real time. Horizontal offset (X) moves the shadow left (negative) or right (positive). Vertical offset (Y) moves it up (negative) or down (positive). Blur radius spreads the shadow edges — 0 creates a hard edge, higher values create soft, diffuse shadows. Spread radius expands or contracts the shadow size before blurring. Opacity controls the alpha (transparency) of the shadow color. The border radius slider rounds the corners of the preview element.
The preview element updates with every slider change so you can evaluate the visual effect immediately. When the shadow looks right, click Copy CSS to grab the ready-to-paste box-shadow and border-radius declarations.
Soft card shadow: X=0, Y=4px, Blur=15px, Spread=0, Opacity=20% → box-shadow: 0 4px 15px rgba(0,0,0,0.2). Pressed/inset button effect: add the 'inset' keyword (if supported) and reverse the Y offset. Hard drop shadow: X=4, Y=4, Blur=0, Spread=0 → box-shadow: 4px 4px 0 rgba(0,0,0,1) for a retro flat design look. Large ambient glow: X=0, Y=0, Blur=40px, Spread=10px, Opacity=15% → a floating card effect popular in dark UI designs.
Who it's for
UI/UX architects, frontend engineers, product designers, and web enthusiasts.
Core Features
- Sliders for horizontal offset, vertical offset, blur, spread, and opacity.
- Adjustable border radius on the preview element.
- Live preview that updates as you drag.
- Copy the ready-to-use box-shadow and border-radius CSS in one click.
🛡️ No tracking — your inputs, keys, and details never leave this client sandbox.
What do each of the box-shadow values mean?
The CSS box-shadow property takes up to five values: horizontal-offset (positive = right, negative = left), vertical-offset (positive = down, negative = up), blur-radius (0 = sharp edge, higher = softer), spread-radius (positive = larger shadow, negative = smaller), and color. All length values are in pixels. An optional 'inset' keyword at the beginning makes the shadow appear inside the element's border instead of outside.
Can I have multiple box shadows on one element?
Yes. CSS box-shadow accepts a comma-separated list of shadow definitions. Multiple shadows layer on top of each other, with the first in the list on top. A common pattern is combining a small, close, dark shadow (for immediate depth) with a large, far, lighter shadow (for ambient light effect): box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08).
What is border-radius and how does it relate to shadows?
The border-radius property rounds the corners of an element. Shadows automatically conform to the element's border-radius — a pill-shaped button with border-radius: 50px will have a pill-shaped shadow, not a rectangular one. This tool lets you adjust border-radius and shadow together so you can see their combined visual effect on the preview element.
How do I create a realistic elevation shadow like Material Design?
Material Design's elevation system uses multiple layered shadows: one tight and dark (simulating a key light), one soft and diffuse (simulating ambient light). A level-4 elevation example: box-shadow: 0 2px 4px rgba(0,0,0,0.14), 0 4px 5px rgba(0,0,0,0.12), 0 1px 10px rgba(0,0,0,0.2). The multiple layers create depth that reads as physical elevation. Adjust the ratio of the tight shadow to the ambient shadow to control how directional the light source feels.
Why getting box-shadow right matters more than it looks
A poorly tuned box-shadow is one of the most common reasons a UI looks amateurish even when everything else is well-designed. A shadow that is too hard, too dark, or too large makes elements look like they are cut out and glued to the page. A shadow that is too soft and spread too wide makes them look like they are floating above a fog. The difference between a shadow that reads as natural depth and one that reads as heavy-handed styling is often a matter of adjusting two or three parameters by a few pixels — changes that are nearly impossible to tune by editing CSS values in a code editor, but take seconds with a visual slider. This is the core reason a CSS shadow designer exists as a dedicated tool.
The rendering model
A box shadow is rendered by extending the element's border box (or the shape defined by its border-radius) and painting a color that fades according to the blur radius. The blur is implemented using a Gaussian blur — the same algorithm used in photo editing software — applied to a solid shadow shape. The spread radius expands the shadow shape before blurring (positive) or contracts it (negative). Multiple shadows are painted in z-order with the first shadow on top, then composited with the element itself on top of all shadows.
Design patterns using box-shadow
Modern UI design uses box shadows to communicate elevation and interactive state. Material Design (Google's design system) defines 24 elevation levels, each with specific shadow parameters. Flat design periods (2013–2016) avoided shadows; neumorphism (2020) uses inset and outset shadows of the same color to create a soft-extruded look; modern 'glassmorphism' combines translucency with subtle shadows. The current mainstream trend favors subtle, multi-layered shadows that create a natural depth feel without appearing overly stylized. The most effective technique is layering two shadows: one tight and dark (simulating a key light), one large and soft (simulating ambient light).
Performance considerations
Box shadows are GPU-accelerated in modern browsers and have minimal performance impact for static elements. However, animating box-shadow (as a CSS transition or animation) triggers a repaint on every frame, which can cause performance issues on low-end devices. The recommended alternative for animated shadows is to use opacity transitions on a pseudo-element (::before or ::after) that has a static box-shadow — transitioning opacity is cheaper than repainting the shadow geometry. For most static use cases — cards, buttons, modals — box-shadow performance is not a concern.