Building the right box-shadow by editing raw values, saving the stylesheet, and reloading the browser is one of the slowest iteration loops in front-end work.
Loading Shadow Effect Builder…
Live preview of every parameter change
Full control over offset, blur, spread, and colour
Supports inset and multiple shadow layers
One-click copy of the finished CSS declaration
Drop the Shadow Effect Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.
Embed code
<iframe
src="https://www.fixtools.io/css-tool/shadow-effect-builder?embed=1"
width="100%"
height="780"
frameborder="0"
style="border:0;border-radius:16px;max-width:900px;"
title="Shadow Effect Builder by FixTools"
loading="lazy"
allow="clipboard-write"
></iframe>Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.
The box-shadow property accepts up to six discrete values per shadow layer: horizontal offset, vertical offset, blur radius, spread radius, colour, and the optional inset keyword. Horizontal offset moves the shadow left or right relative to the element, with positive values pushing the shadow rightward and negative values pulling it leftward. Vertical offset does the same on the vertical axis, where positive values move the shadow downward as if light fell from above. Together these two values determine where the shadow lands relative to the element and imply the position of a notional light source. Getting direction right before you touch blur or spread saves a surprising amount of iteration, because every later adjustment compounds on whatever offset you started with.
Blur radius controls how diffused the shadow edge appears. A blur value of 0 produces a perfectly hard, sharp-edged shadow with no feathering, which is the look used in brutalist and retro design. Larger blur values spread the shadow outward with progressively softer edges, mimicking the way light scatters in real environments. Spread radius adds or subtracts from the shadow size before blur is applied. A positive spread makes the shadow extend beyond the element's box on every side, while a negative spread shrinks the shadow inward, useful for concentrating a blurred shadow at the offset direction. Colour accepts any valid CSS colour notation including rgba(), hsla(), and hex codes, with the alpha channel controlling transparency. A shadow at rgba(0,0,0,0.15) reads as subtle on a white background while rgba(0,0,0,0.4) is noticeably heavier and reads as more dramatic depth.
A common mistake junior developers make with box-shadow is reaching for very large blur values immediately, hoping to mask a less-than-perfect offset choice. The result is a muddy, dispersed haze that does not look polished. The correct workflow is to set a moderate offset first, keep blur under roughly 8px until you confirm the direction reads well, and only then increase complexity by raising blur or adding additional shadow layers. Adding a huge blur to compensate for a colour or spread mismatch never produces a clean shadow. The shadow needs to be calibrated as a whole, not patched layer by layer. Always validate the shadow against your actual page background colour, not just a white preview canvas, because identical box-shadow values look quite different on grey, beige, or dark surfaces.
Combining multiple box-shadow layers in a single declaration unlocks effects that no single shadow can produce. The property accepts a comma-separated list, with each shadow rendered independently and the first listed shadow appearing on top. The most common multi-layer pattern places a tight close-contact shadow first and a wider ambient shadow second, mimicking how real objects cast both a hard contact shadow at their base and a wider soft shadow around them. You can also append a zero-offset, zero-blur, spread-only layer to create a focus ring around the element without using the separate outline property. Treating box-shadow as a stack of independently controlled depth cues rather than a single value is what separates polished design system work from generic flat styling.
Adjust the horizontal and vertical offset sliders first to set the shadow direction, then increase blur for softness, add spread to widen the shadow, and pick a colour with the colour picker. Copy the generated CSS when the result matches your design.
Step-by-step guide to css box shadow generator:
Set horizontal and vertical offsets
Drag the X and Y offset sliders to set the basic shadow direction. Positive Y moves the shadow downward, suggesting light from above. Positive X pushes the shadow rightward, suggesting light from the upper-left. Establish the direction before adjusting blur so each subsequent change builds on a stable foundation rather than chasing a moving target.
Adjust blur and spread
Increase blur radius until the shadow edge reaches the softness your design calls for, then use spread to widen or shrink the overall shadow footprint. Keep blur low and spread close to zero for sharp elevation cues. Use larger blur with negative spread when you want the shadow to feel diffused and ambient without bleeding into neighbouring elements in a tight grid.
Choose a shadow colour
Open the colour picker and choose a hue and opacity that match your background. Pure black at full alpha looks harsh on most surfaces, so favour rgba(0,0,0,0.12) to rgba(0,0,0,0.25) for general elevation work. For branded interfaces consider using a dark variant of your primary colour rather than neutral black to integrate the shadow with the design system.
Copy the CSS output
Click Copy CSS to copy the complete box-shadow declaration to your clipboard. Paste it directly into the relevant stylesheet rule or design token. The output is browser-ready CSS that requires no preprocessing, no vendor prefixes, and no further transformation before deployment to any modern browser including the latest Chrome, Firefox, Safari, and Edge.
Common situations where this approach makes a real difference:
UI designer building a card component
A product designer is building a card component for a SaaS analytics dashboard where information density is high and visual hierarchy needs to be subtle rather than dramatic. They drag the offset sliders to 0 horizontal and 4 pixels vertical to imply a directly overhead light source, set blur to 12 pixels for a soft diffused edge, and pull spread to -2 pixels to keep the shadow from bleeding into neighbouring cards in the tight grid layout. They choose rgba(0,0,0,0.12) as the colour for a low-key shadow that suggests gentle elevation without competing with the data inside. The result reads cleanly against the light grey page background and matches the visual weight of the surrounding interface.
Developer replicating a Figma shadow
A front-end developer receives a Figma handoff showing a panel with a shadow defined as X:0, Y:8, Blur:24, Spread:0, with a colour of #000000 at 15 percent opacity. Rather than translating these values to CSS by hand and hoping the result matches, they enter the values directly into the builder. The live preview confirms the rendered shadow matches the Figma design exactly, with no subtle differences in opacity calculation or blur interpretation that often appear when crossing tool boundaries. One click copies the CSS declaration into the clipboard, ready to paste into the component stylesheet alongside the rest of the design tokens.
Freelancer creating a modal overlay shadow
A freelancer is styling a modal dialog that needs to feel substantially elevated above the dimmed page content behind it. The modal is the focus of the screen and needs a shadow that reads as significantly heavier than the resting card elevation used elsewhere on the same page. They set a 0 pixel horizontal and 0 pixel vertical offset, a 20 pixel blur radius, an 8 pixel spread, and a semi-transparent black colour at around rgba(0,0,0,0.25). The preview confirms the modal appears to float convincingly above the page without the shadow looking cartoonishly large or spilling into adjacent UI chrome at smaller viewports.
Student learning CSS shadow anatomy
A web development student is working through the box-shadow specification for the first time and finds the documentation easier to grasp when each parameter can be isolated visually. Using the builder they move blur to 0 to see what a hard shadow looks like, then increase spread independently to observe the size change, then adjust colour opacity to understand how alpha affects perception. This interactive walkthrough teaches the underlying mental model in minutes, where reading the CSS Backgrounds specification cover to cover would take much longer and leave gaps in intuition. The student finishes the exercise able to construct any shadow they can imagine from first principles.
Use this when you need to create or fine-tune a box-shadow for a card, panel, button, or any block-level element and want a live visual preview rather than guessing values.
Get better results with these expert suggestions:
Match shadow direction to your design system light source
Consistent shadow direction across an interface implies a consistent imaginary light source, which is one of the strongest cues for visual coherence. Most modern design systems place that notional light source above and slightly to the left of the viewport, producing positive vertical offsets and small or zero horizontal offsets across every elevated component. Mixing offset directions between cards, buttons, and modals on the same page makes the layout feel uncoordinated even if every individual shadow looks fine in isolation.
Use negative spread to contain blurred shadows
A large blur radius spreads the shadow well beyond the element edges, which can bleed into adjacent components in tight grid layouts and produce overlap artifacts. Adding a negative spread value, for example -4px or -6px, compensates by pulling the shadow back toward the element before the blur is applied. The result is a shadow that still feels soft and diffused at the edges where it matters most but does not encroach on neighbouring cards. This technique is essential in dashboard layouts where cards sit close together.
Layer two shadows for more natural depth
Real objects cast two shadows simultaneously: a tight close-contact shadow directly beneath the object and a diffused ambient shadow further out. Replicating this with CSS means combining a small-offset, low-blur shadow with a larger-offset, higher-blur shadow at a lower opacity. The two-component shadow technique is what Material Design uses for its elevation scale and what most polished product interfaces use for cards. The result reads as more physically correct than any single-layer shadow can achieve.
Test shadow with CSS transition for hover states
Wrap the box-shadow property in a transition declaration set to roughly 0.2s ease before testing any hover state. Hovering the element will animate smoothly between the resting and hover shadow values, revealing whether the transition feels natural or whether the jump between states is too abrupt. Watching the animation in motion exposes problems that a static comparison hides, particularly around blur radius jumps that look snappy on paper but feel jarring in real interaction.
Start with direction before adding blur
Set horizontal and vertical offsets first to establish the light source direction. Only then increase blur. This order prevents you from compensating with blur when the real issue is offset direction.
Use rgba() for realistic shadows
Pure black shadows at full opacity look harsh. Use rgba(0,0,0,0.12) to rgba(0,0,0,0.25) for natural-looking elevation shadows that work on any background colour.
Preview on your actual background
A shadow that looks perfect on a white preview may disappear or look wrong on a grey or coloured background. Always verify the shadow against the background it will appear on in production.
More use-case guides for the same tool:
Open the full Shadow Effect Builder — free, no account needed, works on any device.
Open Shadow Effect Builder →Free · No account needed · Works on any device