CSS Box Shadow Generator

Introduction: how this CSS box-shadow generator works

The CSS box-shadow property draws one or more shadows around an element's border box. It is one of the quickest ways to add depth to cards, buttons, modals, inputs, and floating panels. Unlike image-based shadows, CSS shadows are calculated by the browser, so they scale cleanly, respond immediately to design changes, and stay easy to edit when a component evolves. This generator focuses on the most common and reusable case: a single shadow with pixel-based offsets, blur, spread, a color with alpha, and an optional inset mode.

In practice, this means the tool reads the values you enter, converts the chosen hex color into rgba(), assembles the final declaration in the correct order, applies that declaration to the preview box, and writes the same text into the output area so you can paste it directly into a stylesheet or design token. If you have ever adjusted random shadow numbers in DevTools until something looked acceptable, this page is meant to replace that guesswork with a clearer process.

What each control changes

A single box shadow is defined by a small set of parameters. Each one affects a different visual cue, so understanding the role of each input makes it much easier to build shadows that feel intentional instead of muddy or accidental. The controls below keep the terminology close to the CSS property so the output is easy to read after you copy it.

• Horizontal offset (offset-x): moves the shadow left or right. Positive values move it to the right, while negative values move it to the left.
• Vertical offset (offset-y): moves the shadow up or down. Positive values move it downward, while negative values pull it upward.
• Blur radius: controls edge softness. A blur of 0 gives you a crisp, hard-edged shape; larger values create softer and more atmospheric shadows.
• Spread radius: grows or shrinks the shadow shape before blur is applied. Positive spread makes the footprint larger. Negative spread keeps the shadow tighter to the element.
• Color and opacity: the color picker sets the base hue, and the opacity slider sets the alpha channel. The output is written as rgba(r, g, b, a) so transparency can be tuned independently from hue.
• Inset: flips the shadow inside the element. Inset shadows are useful when you want an input, well, or pressed button state to look recessed rather than raised.

The simplest way to interpret the result is to think about direction, softness, size, and strength. Offset controls direction. Blur controls softness. Spread controls the footprint. Alpha controls how present or heavy the shadow feels. Inset changes whether that whole effect lives outside the box or inside it. Once that mental model clicks, the property stops feeling like a string of arbitrary numbers.

How the generator builds the CSS value

The syntax used here follows the standard single-shadow form shown below. The generated declaration always appends px to the numeric geometry values, and it outputs color as rgba() so the opacity slider can work independently of the color picker.

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

So if you choose x = 0, y = 8, blur = 24, spread = -8, black, and alpha = 0.18, the output becomes box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.18);. The preview box receives that value through style.boxShadow, which is why the sample updates as soon as you move a slider or edit an input.

There is also a useful geometric intuition behind the offsets. If x is the horizontal offset and y is the vertical offset, the overall displacement from the element grows with the magnitude of that 2D vector: $d=\sqrt{x^2+y^2}$ . That does not mean you should chase large offset numbers. In modern UI work, blur and alpha usually contribute more to a believable sense of depth than extreme distance does.

A good working routine is to start with direction first, because people notice inconsistency in light direction immediately. After that, soften the edge with blur, tighten or widen the footprint with spread, and only then tune opacity. Designers often discover that the first fix for a heavy shadow is not a different offset at all. It is usually a lower alpha or a slightly smaller spread.

Worked example and reusable patterns

The best way to learn shadows is to connect actual numbers to a visual result. Start with a realistic example, reproduce it in the form, and then change only one variable at a time. That makes it easier to see which setting is responsible for the effect you like or dislike.

Example: subtle card elevation. Suppose you want a card that feels gently lifted above the page. A solid starting point is x = 0, y = 8, blur = 24, spread = -8, color #000000, and opacity 0.18, with inset turned off. The output becomes box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.18);. This works well because the negative spread keeps the shadow from looking puffy while the larger blur softens the edge.

Example: crisp sticker shadow. For a playful or retro look, you can use x = 6, y = 6, blur = 0, spread = 0, black, and opacity 0.35. That produces a hard-edged shadow like box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.35);. Because blur is zero, the shadow reads more like a graphic cut-out than atmospheric depth.

Example: inset field depth. If you want a recessed input or panel, try inset with x = 0, y = 2, blur = 6, spread = 0, black, and opacity 0.20. The output box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.2); creates gentle inner depth without looking carved out too aggressively.

These presets are useful as learning anchors, but real interfaces often combine multiple shadows separated by commas. A component may use a faint ambient shadow plus a tighter contact shadow to feel more natural. This calculator intentionally outputs one shadow only, because a single-shadow tool is easier to understand, easier to debug, and still covers many everyday UI needs.

Design guidance for real interfaces

Shadows look best when they follow a consistent lighting model. If one component casts down and right while another casts up and left, the interface can feel subtly off even when every individual shadow is technically valid. A practical approach is to pick one main light direction, often from the top left, and keep most shadows offset down and right. Then create stronger or weaker elevation mostly by changing blur, spread, and alpha instead of changing direction each time.

It is also worth remembering that shadows are only one piece of hierarchy. A button should not rely on shadow alone to be visible or clickable. Good spacing, borders, typography, and color contrast still do most of the work. Shadows are best treated as a supporting cue that adds separation and depth after the fundamentals are already clear. This matters for accessibility because subtle shadows may disappear in bright environments, on low-quality displays, or under forced contrast settings.

If you are building a design system, this generator is especially useful for creating reusable shadow tokens. Instead of inventing new values for every component, you can settle on a small ladder such as --shadow-1, --shadow-2, and --shadow-3. Each token should reflect a different elevation level but still feel like it belongs to the same light source. The easiest way to get there is to keep direction stable and change softness and strength gradually rather than dramatically.

Background context matters too. A shadow that looks elegant on a white page may disappear on a mid-gray surface or feel too harsh on a saturated background. Border radius also changes the result, because the shadow follows the rounded corners of the element. That is why the preview on this page is helpful, but the final test should always happen inside your real layout with the actual background, radius, spacing, and neighboring components you plan to ship.

Limits, assumptions, and practical notes

• Single shadow only: CSS supports multiple shadows separated by commas, but this calculator produces one declaration for clarity. To layer effects, copy the output several times and combine the values manually.
• Units: every geometry value is treated as pixels, and the output always appends px. If your project uses rem or another unit, convert after copying.
• Performance: very large blur radii can be expensive, especially on low-powered devices or inside animated elements. Subtle shadows usually look better and render more efficiently.
• Color syntax: the output uses rgba(). If you prefer modern slash syntax like rgb(r g b / a), you can transform it after copying.
• Preview scope: the preview box demonstrates the shadow on a simple panel, but production results still depend on surrounding layout, background contrast, and whether a parent container clips overflow.

One more practical assumption is that this page is optimized for direct experimentation. That means the form does not try to infer what kind of component you are designing. Instead, it gives you precise control and a readable result. For everyday work, that is usually more helpful than a complicated preset system because you can see exactly which number produced which change.

Common questions. If your shadow looks too dark or dirty, lower opacity first, then reduce spread or introduce a little more blur. If it looks clipped, check for overflow: hidden on a parent. If it feels unrealistic, compare its direction to the rest of your interface before changing the size. If you are unsure where to begin, safe modern defaults are often a small vertical offset, a noticeably larger blur, a small negative spread, and a low alpha in the 0.10 to 0.22 range. Those numbers are not rules, but they are reliable starting points.