Create beautiful CSS box shadows visually with a live preview. Adjust offset, blur, spread, color, and opacity. Add multiple shadow layers, use presets, and copy the generated CSS code -- all client-side in your browser.
box-shadow: none;
See your box shadow update in real time as you adjust the controls. The preview box shows exactly how the shadow will look on your element, so you can fine-tune it visually before copying the CSS.
Adjust horizontal offset, vertical offset, blur radius, spread radius, shadow color, and opacity independently. Toggle inset mode for inner shadows. All values update the generated CSS instantly.
Add up to 5 shadow layers to create complex, layered shadow effects. Each layer can be configured independently, and the CSS is generated with comma-separated shadow definitions.
Choose from 14 built-in presets like Subtle, Neon Glow, Floating, and more to quickly get started. Copy the generated CSS with one click and paste it directly into your stylesheets.
The CSS box-shadow property is one of the most powerful tools for adding depth and visual interest to web elements. It can create subtle elevation effects for cards, dramatic drop shadows for images, glowing effects for buttons, and pressed-in appearances for interactive elements. This tool helps you generate the exact CSS code you need by letting you adjust every parameter visually.
The box-shadow property accepts the following values in order: [inset] offset-x offset-y blur-radius spread-radius color. The inset keyword is optional and makes the shadow appear inside the element. Offset-x and offset-y control the shadow's position. Blur-radius controls how soft the shadow edges are. Spread-radius makes the shadow larger or smaller than the element. Color defines the shadow color, typically using rgba() for transparency control.
CSS allows multiple box shadows on a single element by separating each shadow definition with a comma. This technique is commonly used to create realistic depth effects. For example, a card component might use a subtle close shadow for definition plus a larger diffused shadow for depth. Our generator supports up to 5 layers, letting you build complex shadow compositions visually.
Adding the inset keyword changes the shadow from an outer shadow (default) to an inner shadow. Inset shadows are drawn inside the border of the element and are commonly used for creating pressed button states, input field depth, sunken containers, and embossed text effects.
box-shadow property adds shadow effects around an element's frame. It accepts values for horizontal offset, vertical offset, blur radius, spread radius, and color. You can also use the inset keyword to create inner shadows. Multiple shadows can be applied by separating each shadow definition with a comma.
box-shadow property. For example: box-shadow: 0px 4px 6px rgba(0,0,0,0.1), 0px 1px 3px rgba(0,0,0,0.06);. Our generator lets you add up to 5 shadow layers and customize each one independently. Click "Add Layer" to add a new shadow layer.
inset keyword before the shadow values creates an inner shadow effect. This is useful for creating pressed button states, input field depth, or embossed effects. Toggle the "Inset" checkbox in our generator to switch between outer and inner shadows.
rgba colors are the most common format for box shadows because they allow you to control the opacity (alpha channel). For example, rgba(0,0,0,0.25) creates a 25% opaque black shadow. Our generator lets you pick any color and adjust the opacity independently with a dedicated slider, making it easy to create transparent shadows.
box-shadow CSS declaration will be copied to your clipboard, ready to paste into your stylesheet. The code updates in real time as you adjust the shadow controls, switch layers, or apply presets.
Check out our other free developer tools. Convert colors, format JSON, minify CSS, and more -- all from your browser with no sign-up required.
Color Converter →