Runs in your browser. Your files and text never leave your device - nothing is uploaded.
box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.25);Generate CSS Box Shadows Visually
The Tools Kit’s free Box Shadow Generator lets you design a CSS box-shadow by eye instead of by trial and error. Drag the sliders for horizontal and vertical offset, blur radius, spread radius and opacity, pick a shadow color, tick Inset for an inner shadow, and the preview card updates as you go. When it looks right, copy the finished declaration straight into your stylesheet.
The starting values give a soft card shadow that falls downward: box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.25); Everything runs in your browser, with no signup and no limit on how many shadows you build.
How to Use the Box Shadow Generator
- 1
Set the offsets
Drag Offset X and Offset Y (each -50 to 50 px) to move the shadow left or right and up or down. Positive X moves it right, positive Y moves it down.
- 2
Adjust blur and spread
Drag Blur (0 to 100 px) to soften the edge and Spread (-50 to 50 px) to grow or shrink the shadow. A small negative spread keeps a soft shadow tucked under the element.
- 3
Pick a color and opacity
Choose the shadow color with the color picker and set Opacity from 0 to 100 percent. The tool writes the color as rgba() with that opacity as the alpha value.
- 4
Toggle inset if you need an inner shadow
Tick "Inset (inner shadow)" to draw the shadow inside the element for a pressed or recessed look.
- 5
Copy the CSS
Watch the live preview card, then click Copy to put the complete box-shadow declaration on your clipboard, ready to paste into your stylesheet.
CSS box-shadow Syntax Explained
A box-shadow is made of up to four lengths, a color, and an optional inset keyword. The lengths always follow the same order:
- Horizontal offset — positive values move the shadow right, negative values move it left.
- Vertical offset — positive values move the shadow down, negative values move it up.
- Blur radius — 0 gives a hard edge; larger values give a softer, wider fade. It cannot be negative.
- Spread radius — grows the shadow on every side when positive, shrinks it when negative.
Take the default output, 0px 10px 20px -5px. The shadow starts as a copy of the card shrunk by 5px on every side, is moved 10px down, and is then blurred over a 20px radius. Because the shrunk shape starts 5px inside the card at the sides, the shadow is faint left and right, while at the bottom its edge sits 5px below the card (10 - 5) and fades out from there. That combination of a downward offset, generous blur and slightly negative spread is the classic recipe for a natural-looking card or dropdown shadow.
The generator writes the color as rgba(). Your chosen hex color is split into red, green and blue values and the Opacity slider becomes the alpha, so #3366ff at 40% opacity is written as rgba(51, 102, 255, 0.40). If you need the same color in HEX, HSL or other formats for the rest of your design, the Color Picker converts between them.
Drop Shadows vs Inset (Inner) Shadows
A normal box-shadow is drawn outside the element’s border, which reads as the element floating above the page. Adding the inset keyword draws the shadow inside the border instead, so the element looks pressed in or carved out, a common style for input fields, toggles and pressed buttons. In this tool, the "Inset (inner shadow)" checkbox switches between the two and adds the keyword to the front of the output.
Both kinds follow the element’s border-radius, and neither changes the element’s size or the layout around it. If you want a shadow that hugs the outline of a transparent PNG or SVG icon rather than its rectangular box, that is a job for filter: drop-shadow(), which this generator does not produce.
Box Shadow Examples You Can Recreate
Set the sliders to these values to reproduce each style exactly:
- Soft card:
0px 10px 20px -5px rgba(0, 0, 0, 0.25)— the default values. - Subtle border-like lift:
0px 1px 3px 0px rgba(0, 0, 0, 0.15)— for dense lists and table rows. - Bottom-only shadow:
0px 8px 10px -6px rgba(0, 0, 0, 0.30)— a negative spread hides the sides. - Hard offset shadow:
6px 6px 0px 0px rgba(0, 0, 0, 1.00)— zero blur gives a flat, retro look. - Pressed input:
inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25)— tick Inset.
The tool builds one shadow layer at a time. To layer shadows (for example a tight shadow plus a wide ambient one), generate each separately and join them with a comma in a single box-shadow declaration; the first shadow in the list is drawn on top. Pair a shadow with a background from the CSS Gradient Generator for a finished card style, then run the stylesheet through Minify CSS before shipping it.
Common uses
- Adding elevation to cards, modals, dropdown menus and buttons without guessing pixel values
- Creating hover states, such as a shadow that grows when a card is hovered
- Building inner shadows for text inputs, toggles and pressed-button styles
- Prototyping UI components with placeholder copy from the Lorem Ipsum generator
- Styling app icons and logos on a page, alongside assets from the Favicon Generator or graphics exported with SVG to PNG
For more utilities for front-end work, browse the full set of developer tools.
Box shadow terms explained
| Term | What it means here |
|---|---|
| Offset X | Horizontal distance of the shadow from the element; positive moves right, negative moves left |
| Offset Y | Vertical distance of the shadow; positive moves down, negative moves up |
| Blur radius | How soft the shadow edge is; 0 gives a hard edge, and negative values are not allowed in CSS |
| Spread radius | Grows (positive) or shrinks (negative) the shadow on every side before it is blurred |
| Inset | Keyword that draws the shadow inside the element’s border instead of outside it |
| rgba() | Color written as red, green, blue (0-255) plus an alpha value from 0 (transparent) to 1 (opaque) |
| Elevation | The design idea of an element appearing raised off the page, usually shown with a soft downward shadow |
Frequently Asked Questions
A box shadow generator is a visual editor for the CSS box-shadow property. Instead of guessing pixel values in a stylesheet, you drag sliders for offset, blur, spread and opacity, pick a color, see the result on a live preview, and copy the finished CSS.
Add a box-shadow declaration to the element’s rule, for example box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.25); The values are horizontal offset, vertical offset, blur radius, spread radius, and color. This generator builds that line for you and copies it in one click.
The lengths always go in this order: horizontal offset, vertical offset, blur radius, then spread radius. Blur and spread are optional. The color and the inset keyword can go before or after the lengths. The generator always outputs inset first (when ticked), then the four lengths in px, then an rgba() color.
Spread enlarges the shadow on every side when positive and shrinks it when negative, before the blur is applied. A negative spread such as -5px keeps a blurred shadow from poking out at the sides, which is why soft card shadows often use one.
Blur controls how soft or sharp the shadow edge is; spread controls how big the shadow shape is. With blur 0 and a positive spread you get a solid outline-like band; with a large blur and a negative spread you get a soft, diffuse shadow.
Add the inset keyword, for example box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25); In this generator, tick the "Inset (inner shadow)" checkbox and the keyword is added to the output automatically.
Use a zero horizontal offset, a positive vertical offset, and a negative spread so the shadow does not show at the sides, for example box-shadow: 0px 8px 10px -6px rgba(0, 0, 0, 0.30); Set Offset X to 0, Offset Y to 8, Blur to 10, Spread to -6 and Opacity to 30 to get exactly that line.
This tool generates one shadow layer at a time. CSS accepts several shadows separated by commas, with the first one drawn on top, so you can generate two shadows, copy each, and join them into one box-shadow declaration yourself.
No. A box shadow is purely visual: it does not change the element’s size, push neighboring elements, or add to scrollable overflow. It follows the element’s border-radius, so rounded cards get rounded shadows.
box-shadow draws a shadow around the element’s rectangular box (following its border-radius). filter: drop-shadow() follows the visible shape of the content, including transparent areas of a PNG or SVG, but it has no inset keyword and takes no spread value. This generator outputs box-shadow only.
Always rgba(). The color you pick is converted from hex into red, green and blue values, and the Opacity slider becomes the alpha value with two decimals, so #3366ff at 40 percent opacity becomes rgba(51, 102, 255, 0.40).
Yes. It is free with no signup and no limit, and it runs entirely in your browser, so nothing you build is sent to a server.
Reviewed by Raja Jahangir · Last reviewed: October 7, 2026
How do you make a CSS box shadow?
To make a CSS box-shadow, set the horizontal and vertical offset, blur, spread and opacity sliders, pick a colour, and tick Inset for an inner shadow. The preview updates live and the rule copies in one click, for example box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.25); for a soft downward card shadow.
What do the four box-shadow values mean?
In box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.25), the first value is horizontal offset (positive moves right), the second is vertical offset (positive moves down), the third is blur radius (higher is softer), and the fourth is spread (positive enlarges the shadow, negative shrinks it). The colour comes last, usually with alpha for transparency.