Colors EncyclopediaFree CSS tool · No sign-up
Box Shadow Studio
Create polished CSS box shadows with live controls for position, blur, spread, opacity, color, inset mode, and copy-ready code.
Production CSS
Copy and use
Connected encyclopedia
Matching this color…
Looking for an exact named-color record or the closest editorial color.
Practical workflow
Create believable CSS elevation
Position the light and depth
Horizontal and vertical offsets determine where the shadow falls and how the component appears to lift from its surface.
Tune softness and spread
Blur controls edge softness while spread changes the shadow footprint without resizing the component.
Control color and opacity
Use a restrained translucent shadow for natural elevation, or enable inset mode for pressed controls and recessed panels.
Better shadows for real interfaces
Cards, menus, sticky headers, dialogs, buttons, and floating controls usually need different elevation levels. Copy the generated declaration as a starting token, then reuse consistent shadow levels throughout the interface. This free tool runs locally in the browser, needs no account, and puts only the selected settings in a share link.