Box-Shadow & Border-Radius Generator

Visually generate CSS box-shadow and border-radius. Multiple shadow layers, live preview, copy CSS instantly.

Free Always No Account Needed 100% Client-Side
Shadow 1
x offset0px
y offset4px
blur offset6px
spread offset-1px
Color
8px
8px
8px
8px
box-shadow: 0px 4px 6px -1px #00000026;
border-radius: 8px;

About this tool

Box shadows and border radii are two of the most frequently tweaked CSS properties in UI design. Getting them right usually involves trial and error in DevTools. This visual generator lets you design them interactively.

Box Shadow Generator: - Add multiple shadow layers - Control X offset, Y offset, blur radius, spread radius, and color per layer - Toggle inset shadows (inner shadow effect) - Live preview on a draggable box - See the exact CSS output update in real-time

Border Radius Generator: - Individual corner control (top-left, top-right, bottom-right, bottom-left) - Shorthand and longhand CSS output - Elliptical radius (different horizontal/vertical radii) - Common presets: pill, circle, rounded, sharp

Combines both generators into one preview so you can design a complete card/button appearance and copy all CSS at once.

Frequently Asked Questions

What does 'inset' mean in box-shadow?
Inset moves the shadow inside the element (inner glow/shadow) instead of outside (outer shadow).
What are the box-shadow parameters?
In order: horizontal offset, vertical offset, blur radius, spread radius, and color. Example: 2px 4px 8px 0px rgba(0,0,0,0.1).
How do I make an element appear raised?
Use a light shadow above (negative Y, white) and dark shadow below (positive Y, dark): box-shadow: 0 -2px 4px rgba(255,255,255,0.5), 0 4px 8px rgba(0,0,0,0.15).
Can I have multiple box-shadows?
Yes. Comma-separate multiple shadow values: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08).

Related Tools

CSS Gradient

Generate linear, radial, and conic CSS gradients with a visual editor. Copy CSS code instantly.

Color Picker

Pick colors visually and convert between HEX, RGB, HSL, and CMYK. Generate color palettes and accessibility contrast ratios.

CSS Minifier

Minify or beautify CSS. Remove comments, collapse whitespace, shorten values. Shows compression percentage saved.

HTML Formatter

Format, beautify, and minify HTML. Auto-indent nested elements and collapse attributes. 100% client-side.