A single CSS box-shadow declaration combines six ordered values — optional inset, horizontal offset, vertical offset, blur radius, spread radius, and an rgba color — and the visual CSS Box Shadow Generator exposes each one as a live control so the declaration updates the moment you change an input. Working visually removes the guesswork that comes from memorizing whether spread sits before or after the color, what counts as a valid blur range, or why an inset shadow seems to point the wrong way. Each control in the tool maps to one position in the official CSS Backgrounds and Borders box-shadow component model documented by W3C and MDN, so the preview card shows exactly what a modern browser will render when the rule ships. The generated output is plain text that you paste into any style rule, with no stylesheet tags, vendor prefixes, or helper HTML included. That direct mapping between a slider and a real declaration is the most reliable way to keep shadows consistent across components, themes, and screen sizes without testing each value by hand.
What the box-shadow property actually does
The CSS box-shadow property paints one or more shadow effects behind or inside an element. Per the W3C CSS Backgrounds and Borders Level 3 specification and the MDN box-shadow reference, each shadow is described by an optional inset keyword, two length offsets for horizontal and vertical direction, a blur radius, an optional spread radius, and a color. The browser composites the result with the element's border box, so the shadow follows the element's shape and any border-radius applied to it.
When inset is omitted, the shadow is drawn outside the element's border edge like a drop shadow. When inset is included, the shadow is drawn inside the border edge, which is useful for pressed buttons, recessed form fields, inner highlights on cards, and other cues that suggest depth without floating the element. Each shadow also accepts a color, and the tool converts any six-digit hexadecimal color into rgba so the alpha channel can be tuned independently of the red, green, and blue channels.
Why build it visually instead of typing values by hand
Typing a box-shadow declaration by hand is fragile because the order of the values matters, negative offsets invert direction, and the difference between blur and spread is easy to confuse. The visual generator fixes each of those problems with explicit sliders, a sample card that updates as you drag, and a serialized string that reflects every change immediately. Because the inputs are bounded — horizontal and vertical offsets from -200 to 200 pixels, blur from 0 to 200 pixels, and spread from -100 to 100 pixels — you cannot accidentally enter an unsupported value that browsers will parse in an unexpected way.
The preview also makes it obvious when an outer shadow is too dark, when a spread value has collapsed the visible footprint to nothing, or when an inset shadow has been inverted by a negative offset. Browsers can still render the same declaration slightly differently at high pixel densities, with compositing layers, or with transforms applied, but the live preview surfaces most of those problems before the value reaches your stylesheet. The tool is intentionally narrow — one bounded shadow layer at a time — so what you see on the card is the only thing the output string describes.
Make a CSS box shadow with the visual generator
Open the generator in a browser tab. A sample card sits in the middle of the page and the six controls are stacked beside or below it. Follow the steps below in order to move from a blank preview to a copy-ready declaration.
- Drag the horizontal offset slider until the shadow sits in the right direction on the preview card. Positive values push an outer shadow to the right; negative values push it left.
- Drag the vertical offset slider to set the shadow height. Positive values push an outer shadow downward; negative values push it upward.
- Set the blur radius to soften the shadow edge. Start with a value larger than your largest offset so the edge feathers smoothly; zero produces a hard edge.
- Set the spread radius only if you need the shadow footprint to expand or contract beyond the blur. Leave it at zero for most cards and buttons, use a small positive value for floating elements, and reach for negative spread with caution.
- Pick a six-digit hexadecimal color for the shadow. Black like #000000 is a safe default, but the same approach works for tinted shadows on brand surfaces.
- Adjust opacity from zero to one hundred percent to control the alpha channel that becomes the fourth rgba component.
- Toggle the inset option if you want the shadow drawn inside the border edge instead of outside it.
- Read the generated declaration displayed under the preview card. It is plain text in the form box-shadow: <offsets> <blur> <spread> rgba(r, g, b, a);.
- Copy the declaration, paste it into the style rule of the element you actually want to style, and test the component at multiple sizes, in both light and dark themes, and across the browsers your audience uses.
Parts of the generated declaration
A box-shadow string is shorter than it looks. The example below is what the generator produces for a typical floating card.
box-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.25);
| Position | Name | Example value | What it controls |
|---|---|---|---|
| 1 | Optional inset | (omitted) | Outer shadow by default; the inset keyword flips the shadow to the inside of the border edge |
| 1 | Horizontal offset | 4px | Distance to the right (positive) or left (negative) |
| 2 | Vertical offset | 8px | Distance downward (positive) or upward (negative) |
| 3 | Blur radius | 16px | Softness of the edge; zero produces a hard edge |
| 4 | Spread radius | 0px | Expands or contracts the shadow shape before blur is applied |
| 5 | Color | rgba(0, 0, 0, 0.25) | Six-digit hex converted to rgba with alpha from the opacity slider |
The order is fixed by the CSS Backgrounds and Borders specification, so any standards-compliant generator produces the same string for the same inputs. The tool always writes optional inset first, the four pixel lengths in order, and the rgba color last, with alpha rounded to at most three decimal places.
Limits and ranges the generator enforces
Every control in the tool is bounded so the output stays inside what CSS will accept without surprise parsing. Knowing the limits helps you decide which slider to move when the preview does not look the way you expect.
| Control | Range | Effect at the edges |
|---|---|---|
| Horizontal offset | -200 to 200 px | Values beyond ±200 px move the shadow off most preview areas |
| Vertical offset | -200 to 200 px | Same behavior as horizontal |
| Blur radius | 0 to 200 px | Blur cannot be negative; zero produces a hard edge |
| Spread radius | -100 to 100 px | A sufficiently negative spread can collapse the shadow to nothing |
| Opacity | 0 to 100% | Serialized as alpha 0 to 1, rounded to three decimals |
| Inset | Toggle | Flips the shadow from outside to inside the border edge |
| Color | Six-digit hex | Converted to rgba with channels from 0 to 255 |
These ranges match the implementation methodology of the generator. If a design needs to escape them, the shadow usually belongs on a separate element rather than on the same box-shadow value, because CSS itself will accept larger numbers but the visual result will rarely be useful.
Test the shadow on the real component
The generator does not modify project files, run an autoprefixer, or remember settings after a reload, so the only way to confirm a shadow is right is to paste it into the real rule and inspect the actual element. A few checks catch most problems before they ship. Look at the element on a background similar to its destination. A shadow that reads well on white can disappear against a busy hero image, and a soft gray shadow can look muddy on a dark theme.
Check disabled and focus states too, because shadows often need to change when an interactive element is active. If you design for accessibility, review the result with reduced-transparency and high-contrast preferences enabled; a low-opacity shadow may vanish entirely when transparency is reduced. Watch the result at small and large sizes. The same pixel values that look right on a desktop card can look oversized on a mobile button and undersized on a wide hero panel.
A dramatic shadow can also reduce clarity, make a component look detached from the page, or create a false hierarchy where none is intended, so use shadows to reinforce structure rather than carry meaning on their own. For a deeper walkthrough that focuses on the same visual workflow, see the practical guide on getting a box shadow in CSS with a visual generator. When a single layer is not enough, remember that the tool produces one shadow layer at a time, so combining and ordering multiple shadows is a manual step done in your own stylesheet by comma-separating additional declarations.
For a deeper look, see How to Make a Button in CSS and HTML: A Visual Walkthrough.