Free · Fast · Privacy-first

CSS Shadow Without Blur

Setting box-shadow blur-radius to 0 produces a hard, sharp-edged shadow with no feathering at all along its outline.

⚡

Zero-blur shadow builder with live preview

🔒

Precise offset and colour controls for hard shadows

✨

Works on buttons, cards, and containers

⚡

One-click CSS output ready to copy

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Shadow Effect Builder to your website

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.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

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>

<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.

Hard Shadows, Retro Design, and Why 0 Blur Is a Deliberate Aesthetic Choice

A box-shadow with blur-radius of 0 produces a shadow that is a precise, sharp-edged copy of the element silhouette displaced by the offset distance. There is no gradation, no feathering, and no diffusion at the edge. The shadow and element together create the impression of a thick cardboard cutout or a layer of paper offset from a second layer beneath it. This aesthetic has its roots in screen printing, letterpress, and hand-cut collage, where physical constraints meant shadows were always hard-edged. Neo-brutalist web design from the mid-2010s onward has consistently used this technique to create interfaces that feel bold, handcrafted, and deliberately non-digital.

The most recognisable use of hard shadows is on buttons and cards in brutalist UI. A button with a 4px black hard shadow at the lower-right creates an immediately tactile appearance. On :active, reducing the offset to 1px and adding a 3px translateX(3px) translateY(3px) transform simulates the button physically pressing into the surface, eliminating the visible offset gap. This active state, where the button appears to move into the shadow position and close the gap, is one of the most satisfying click animations in the brutalist design vocabulary. It requires no blur, no transition between shadow types, only an offset and transform change.

Hard shadows on retro designs are most effective with high-contrast colour choices that emphasise the deliberate flatness of the shadow shape rather than trying to disguise it. Black shadow on a white or pastel card is the most common and recognisable combination across neo-brutalist work today. Equally effective is a bright background colour paired with a same-hue-darker shadow, which creates a more sophisticated retro look than generic black on every component. At present, several major consumer-facing apps and the landing pages for design tools deliberately use hard-shadow cards as an identity signal. The style pairs well with bold sans-serif typography, monospaced labels, and dense, grid-based layouts that emphasise structural geometry over photographic depth.

Hard shadow design also benefits from disciplined use of spacing because the lack of blur leaves no soft edge to mask layout errors that softer shadows would gracefully diffuse. A 4 pixel hard shadow on a card pushes the perceived bottom and right edges of the card outward by exactly 4 pixels, so adjacent components need at least that much breathing room to avoid visual collisions. Plan grid gaps with the shadow extent in mind and prefer slightly more generous gutters than you would for soft-shadow layouts. The discipline is part of what gives well-executed brutalist design its distinctive sense of intentional, almost typographic spatial precision. Sloppy spacing immediately breaks the look in a way that softer shadow systems can paper over.

MDN: box-shadow W3C CSS Backgrounds Specification

How to use this tool

💡

Set blur to 0 in the builder and increase horizontal and vertical offset to taste. Choose a contrasting colour for the shadow, typically dark or black, to create the characteristic hard offset look. Copy the CSS to apply to your component.

How It Works

Step-by-step guide to css shadow without blur:

1
Set blur radius to 0
In the builder, set blur-radius explicitly to 0 pixels. This immediately produces a hard, sharp-edged shadow in the preview area, instantly switching the visual character from soft elevation to flat brutalist offset. Confirm the shadow looks crisp at every preview zoom level rather than blurry or partially feathered, which can happen if the builder retains a non-zero blur from a previous experiment that needs to be explicitly zeroed before the hard shadow look becomes available.
2
Adjust horizontal and vertical offset
Increase the X and Y offset values together, typically in the 3 to 6 pixel range for buttons and 4 to 8 pixels for cards, to create the diagonal hard shadow characteristic of brutalist design. Keep the horizontal and vertical offsets equal for a symmetrical 45-degree shadow direction that reads as the dominant style convention. Unequal offsets are also valid but feel less archetypal and may make the shadow look slightly off-balance to viewers accustomed to the standard symmetry.
3
Select a contrasting shadow colour
Choose black for the most classic brutalist treatment, or pick a dark version of the element fill colour for a richer, more designed retro look. Hard shadows rely on strong contrast against the underlying background to read clearly, because there is no blur to fall back on. Test the shadow colour against the actual page background rather than relying on the default white preview, which often flatters dark shadows in ways that production conditions do not match perfectly.
4
Copy the CSS and add an :active state
Click Copy CSS to copy the box-shadow declaration. Then add a matching :active state in your stylesheet that reduces the box-shadow value to none and applies a transform: translate() in the same direction and distance as the original offset values. This press feedback animation closes the visible offset gap on click, simulating the button being pushed into the surface and producing the satisfying tactile response that defines the brutalist click interaction pattern.

Real-world examples

Common situations where this approach makes a real difference:

Neo-brutalist landing page for a design tool

A startup builds a landing page with a deliberate neo-brutalist aesthetic. Every card and button uses a 4px black hard shadow with no blur on a white background. The pressed button animation moves the element 4px into the shadow position on click. The overall effect immediately signals the brand's design-aware identity and stands out in a sea of soft-shadow material-style layouts.

Retro game leaderboard card

A developer builds a browser game leaderboard styled after 1980s arcade interfaces. Score cards use a 6px hard shadow in bright red on a dark background, with no blur and a pixel-grid border. The hard shadows reinforce the retro game aesthetic without requiring any custom graphics, using pure CSS throughout.

Interactive pricing card with press animation

A SaaS pricing page uses hard-shadow cards for each tier. On hover, the shadow deepens by 2px. On click (selecting a plan), the card animates with translate(6px, 6px) and the shadow disappears for 200ms before the page transitions. The press animation makes the selection feel satisfying and confirms the click clearly.

Newsletter sign-up callout block

A content site adds a newsletter sign-up section styled as a torn-paper note with a 5px hard shadow in dark navy. The sharp shadow edge makes the callout look like it is physically placed on top of the article content, drawing attention without using background colours or borders that might conflict with the article design.

When to use this guide

Use this when building retro, brutalist, or flat-design UI elements that need a hard offset shadow rather than a soft, diffused elevation shadow.

Pro tips

Get better results with these expert suggestions:

Use the same value for offset and the matching transform on :active

If your hard shadow is offset 4 pixels right and 4 pixels down, the :active state should add transform: translate(4px, 4px) and reduce box-shadow to none at exactly the same moment. The element moves precisely into the shadow position and the shadow disappears, completing the press illusion without any blur transition or other softening trick. The match between offset distance and transform distance is what makes the press feel physically correct. Mismatched values look broken, because the gap fails to close cleanly when the button is pressed down.

Pair hard shadows with border for a complete brutalist card

A fully brutalist card typically combines four reinforcing visual elements: a 2 pixel solid border matching the shadow colour exactly, zero border-radius for sharp corners, a large hard shadow at 4 to 6 pixels of offset, and bold monospace or geometric type inside the card body. The border is what cleanly separates the card edge from the shadow, making both elements visible as distinct components rather than blending into a single muddy outline. Without the matching border, hard shadows on lightly coloured cards can read as visually weaker than intended at typical screen viewing distances.

Coloured hard shadows create richer retro effects

Instead of always defaulting to black, try a dark version of the element's own fill colour as the shadow colour for a more cohesive treatment. A yellow card with a dark amber hard shadow has a more intentional retro look than the same yellow card with a pure black shadow underneath it. The colour echo between fill and shadow makes the shadow feel integral to the design rather than a generic darkness applied uniformly across every component on the page. The same principle holds for pink with deep magenta and mint with forest green, which both read as deliberate stylistic choices.

Hard shadows at large offsets need extra element padding

A 12 pixel hard shadow on a card visually shifts the perceived bottom and right edges of the card outward by exactly 12 pixels, even though the underlying box model dimensions remain unchanged. Add equivalent padding or margin to the card container to prevent the shadow from being clipped by parent overflow rules or colliding visually with adjacent elements in a tight grid layout. Account for the shadow extent in your layout grid spacing calculations as well, otherwise the visual rhythm of the page will feel off without any single component looking obviously wrong on its own.

Match offset direction to establish a light source

Even hard shadows benefit from a consistent offset direction across all components. Lower-right offset (positive X and Y) is the most common, suggesting light from the upper-left. Mixing directions across components in the same page makes the layout feel incoherent.

Animate the offset on :active for press feedback

On :active, reduce the offset to 1px and add a matching translate() transform so the element moves into the shadow position. The gap closes visually, simulating a physical press. No blur change is required.

Use spread to add a framed effect

Adding a small spread (1-2px) alongside 0 blur creates a slightly larger shadow than the element, making the shadow appear as a thick border or frame rather than a displaced copy. This adds weight to the element at the cost of a slightly cartoonish look.

FAQ

Frequently asked questions

A hard shadow is a box-shadow with a blur-radius of 0. With no blur, the shadow has a perfectly sharp edge that is a precise copy of the element's silhouette offset by the specified X and Y distance. There is no gradation at the shadow edge, making it look like a solid, flat layer beneath the element rather than a diffused glow or soft elevation shadow.

Hard shadows are central to retro, brutalist, and neo-brutalist web design. They also appear in flat design interfaces that want to suggest clickability without realistic depth, in cartoon and comic-style UIs, in print-inspired layouts referencing screen printing and letterpress, and in certain minimal design systems where any shadow present must be bold and deliberate.

Define the resting state with a hard shadow at full offset (for example box-shadow: 4px 4px 0 #000). In the :active state, add transform: translate(4px, 4px) and reduce box-shadow to none. The element moves into the shadow position and the shadow disappears, giving the illusion that the button has been pressed into the surface.

Yes. Hard shadows accept any valid CSS colour including rgba(), hsl(), and hex codes. Black and dark grey are the most common choices. Coloured hard shadows, such as a dark teal shadow on a teal card or a dark orange shadow on a yellow button, create a more sophisticated retro effect where the shadow feels like part of the colour system rather than a generic black overlay.

Yes. Adding a spread value to a 0-blur shadow makes the shadow larger than the element by the specified amount on all sides. A spread of 2px on a 0-blur shadow creates a shadow that is 4px wider and 4px taller than the element before the offset is applied. The result looks like the element has a thick solid frame beneath it rather than just a displaced copy.

Yes. Box-shadow follows the element's border-radius. A hard shadow on a button with border-radius: 8px produces a rounded hard shadow matching the button's corner radius. On a fully circular element, the hard shadow is circular. The hard-shadow pressed-button effect works well on both sharp-cornered and rounded buttons, adapting automatically to the element shape.

Yes. CSS can transition between any two valid box-shadow values, including between a 0-blur hard shadow and a positive-blur soft shadow. The browser interpolates all values including blur radius. The transition from hard to soft shadow as an element is hovered is an interesting interaction design pattern, but it is not common in brutalist aesthetics where hard shadows are a deliberate stylistic commitment.

Hard shadows with 0 blur have slightly less GPU compositing cost than heavily blurred shadows because there is no blur calculation required at paint time. For most interfaces the difference is imperceptible. On very low-end devices with many shadowed elements scrolling simultaneously, hard shadows have a marginal performance advantage that can show up in long lists or animated grids. This is a secondary consideration, not a primary reason to choose hard shadows over blurred ones, but it is a genuine technical benefit worth noting when you are already working in a brutalist visual system and care about scroll smoothness on older hardware.

Either works, and the choice depends on whether you want translucency. Solid hex colours like #000 produce the boldest brutalist effect because the shadow reads as a fully opaque second layer. Rgba colours such as rgba(0,0,0,0.85) let a small amount of background show through, which can soften the look slightly while preserving the hard edge. For most pure brutalist work, stick with fully opaque hex codes. For hybrid designs that lean retro without committing fully to brutalism, rgba colours give you a dial to tune the visual weight without losing the sharp shadow edge that defines the style.

Yes. Box-shadow accepts a comma-separated list of values, so you can layer two or three hard shadows at different offsets and colours on the same element. A common pattern is a primary 4px black hard shadow plus a secondary 8px coloured hard shadow further out, producing a layered card that looks like three sheets of paper stacked at offsets. This is a signature look in maximalist neo-brutalist sites and pairs well with bright accent colours. Keep stacked shadows to a maximum of three layers, otherwise the element starts to lose visual hierarchy against the rest of the page.