Generate CSS box-shadow declarations with offsets, blur, spread, opacity, inset shadows, and layered elevation presets.
Last updated: August 2026 | By Workshelve Team
.card {
box-shadow: 0px 18px 40px -12px rgba(15, 23, 42, 0.28);
}CSS box-shadow draws one or more shadows around an element's border box. It is commonly used for cards, menus, modals, buttons, raised panels, and inset pressed states.
Each shadow uses horizontal offset, vertical offset, blur radius, optional spread radius, and color. Offsets and spread may be negative, but blur radius cannot be negative.
This generator is one-way because shadow lists can include multiple comma-separated layers, inset keywords, CSS variables, color functions, and design-token references that do not reverse into a single reliable control set.
Build a layered card shadow with depth and a closer contact shadow:
The broad layer creates elevation, while the smaller tinted layer gives the component a sharper contact point near its base.
Yes. Negative X moves the shadow left, and negative Y moves it upward.
No. CSS blur radius must be zero or positive, so the generator rejects negative blur values.
Negative spread shrinks the shadow shape before blur is applied, which helps create tighter modern shadows.
Inset draws the shadow inside the element, often used for pressed buttons, recessed controls, or inner depth.
Box-shadow layers are painted front to back, so the first shadow in a comma-separated list is visually on top.
Shadow opacity is usually essential. RGBA keeps the chosen HEX color and the alpha value explicit.
Yes. Zero blur creates a sharp shadow edge and can be useful for outlines or hard offset effects.
Valid shadow CSS may include many layers, variables, color functions, and omitted values, so reverse parsing would only cover a small subset.
Related Tools
Build and preview common CSS Grid layout patterns.
Build linear and radial gradients with custom color stops.
Remove, replace, and export image metadata.
Generate and inspect solid background-color declarations.
Generate gradient and image background-image CSS.
Generate uniform or side-specific CSS border declarations.