CSS Box Shadow & Border Radius Generator

CSS Box Shadow & Border Radius Generator

🎨 Free CSS box-shadow and border-radius generator with live preview. Create beautiful shadows, rounded corners, and modern UI effects. Copy-paste ready code for web design.

Box Shadow Property

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

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

Shadow Parameters

• X-Offset (horizontal): Positive values move shadow right, negative left
• Y-Offset (vertical): Positive values move shadow down, negative up
• Blur Radius: Higher values create more blur. 0 means sharp shadow
• Spread Radius: Positive values expand shadow, negative shrink it
• Color: Any CSS color value (hex, rgb, rgba, hsl)
• Inset: Changes shadow to inner shadow instead of outer

Border Radius Property

The border-radius property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Syntax: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Common Use Cases

• Cards: Subtle shadow (0 4px 6px rgba(0,0,0,0.1)) with medium radius (8px)
• Buttons: Colored shadow matching button color for depth effect
• Modals: Large shadow (0 20px 25px rgba(0,0,0,0.15)) to appear floating
• Images: Circle avatars (border-radius: 50%) or rounded thumbnails (8-16px)
• Input Fields: Inset shadow for pressed/focused state
• Neumorphic Design: Multiple shadows (light and dark) with matching background

Shadow Best Practices

• Use subtle shadows: 10-20% opacity is usually enough for depth
• Y-offset > X-offset: Mimics natural light from above
• Larger blur for elevation: More blur = appears higher off page
• Match shadow color: Use element's color at low opacity for cohesion
• Performance: Avoid animating box-shadow, use opacity or transform instead

Popular Shadow Styles

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Border Radius Patterns

• None (0px): Sharp corners, modern minimalist look
• Small (4px): Subtle rounding for inputs, buttons
• Medium (8px): Standard for cards, containers
• Large (16px+): Friendly, approachable design
• Pill (999px or 50%): Rounded ends for tags, badges
• Circle (50%): Avatars, icon buttons (requires square element)

Advanced Techniques

• Multiple Shadows: Combine shadows for layered effects
• Glow Effect: 0 0 20px [color] with no offset
• Neumorphism: Light shadow top-left, dark shadow bottom-right
• Focus Rings: Colored shadow for accessibility (0 0 0 3px rgba(color,0.5))
• 3D Effect: Multiple shadows with increasing offset and blur

Browser Support

Box-shadow and border-radius are supported in all modern browsers. For IE8 and older, use vendor prefixes (-webkit-box-shadow, -moz-box-shadow) though this is rarely necessary today.

💡 Pro Tip: For hover effects, don't animate box-shadow directly as it's expensive. Instead, create the shadow on a pseudo-element (::before or ::after) and animate its opacity. This gives the same visual effect with much better performance, especially on mobile devices!