CSS box-shadow generator with visual editor
X/Y Offset — horizontal and vertical shadow offset in pixels.
Blur — shadow blur radius. The higher the value, the more blurred the shadow.
Spread — increase or decrease the shadow size.
Inset — makes the shadow inset (indented) instead of outer.
Multiple shadows can be added to create complex effects.
CSS Box-Shadow Generator — Element Shadows Online
Visual CSS box-shadow editor with 8 ready presets, random generation, multiple shadow support, inset shadows, and neumorphism effects. All parameters are adjustable in real time with instant preview.
CSS Box-Shadow Syntax
box-shadow: offset-x offset-y blur spread color [inset];
| Parameter | Description | Example |
|---|---|---|
| offset-x | Horizontal shift (+ right) | 4px |
| offset-y | Vertical shift (+ down) | 4px |
| blur-radius | Blur radius (0 = sharp) | 10px |
| spread-radius | Shadow expansion/contraction | -2px |
| color | Shadow color (rgba for transparency) | rgba(0,0,0,0.2) |
| inset | Inner shadow | inset |
Shadow Presets
The generator includes 8 ready-made shadow presets for common UI patterns:
- Subtle — light shadow for cards and containers
- Medium — standard elevation for buttons and modals
- Deep — pronounced depth for floating elements
- Sharp — hard-edge shadow without blur
- Diffuse — large spread for ambient lighting effect
- Neumorphism — soft extruded look using light and dark shadows
- Inset — inner shadow for pressed/recessed appearance
- Layered — multiple shadows for realistic depth
Click any preset to instantly apply it, then fine-tune individual parameters as needed. Use the Random button to generate unexpected shadow combinations for creative exploration.
Multiple Shadows
CSS allows multiple shadows: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.2); — creates a more realistic depth effect.
Frequently Asked Questions
How to create a bottom-only shadow?
Use negative spread: box-shadow: 0 4px 6px -4px rgba(0,0,0,0.3);
What is neumorphism?
A UI style simulating physical objects through light and dark shadows on the same background. Elements appear extruded or pressed into the surface.
For gradients use CSS Gradient, for border radius — CSS Border Radius.
Useful articles
WCAG Color Contrast: Website Accessibility Guide
A complete guide to color contrast: WCAG 2.1 standards, AA and AAA levels, calculation formula, practical examples of good and bad contrast, and how to fix accessibility issues.
CSS Border Radius: Rounding Element Corners
How to use border-radius: syntax, shorthand notation, elliptical corners. Online border-radius generator.