What is a CSS Box Shadow?
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is often used in modern web design to create a sense of depth, elevation, or emphasis for UI elements like cards and buttons.
Understanding the Syntax
A standard box shadow requires at least two values (X and Y offsets) and a color. However, it can take up to six values:
- X-Offset: Moves the shadow horizontally.
- Y-Offset: Moves the shadow vertically.
- Blur Radius: The larger the value, the bigger and lighter the shadow becomes.
- Spread Radius: Positive values expand the shadow, negative values shrink it.
- Color: The shadow's color (usually RGBA for opacity).
- Inset (optional): Changes the shadow from an outer drop shadow to an inner shadow.
No Server Uploads Required
Everything is processed locally. OmniTools operates on a strict "Zero Server Upload" architecture. When you design and tweak your box shadows, the rendering and CSS string generation happen instantly within your web browser.
Your generated design snippets are never transmitted to our backend servers.