Skip to main content

    CSS Box Shadow Generator

    Generate CSS box-shadow visually. Adjust offset, blur, spread, colour, and copy the code.

    Free to use. Runs in your browser.

    Drag sliders to build a CSS box-shadow and copy the generated code. Supports inset, multiple shadows, and custom colour with opacity control.

    CSS Code

    box-shadow: 5px 5px 15px 0px #00000040;

    CSS Box Shadows: Adding Depth to Flat Design

    Box shadows create the illusion of depth on a flat screen. They make cards feel like they're floating, buttons look pressable, and modals appear to sit above the page. Without shadows, everything feels flat and disconnected, with too many, everything looks like a 2012 skeuomorphic app.

    The box-shadow property takes up to six values: horizontal offset, vertical offset, blur radius, spread radius, colour, and an optional "inset" keyword. The trick is using subtle, realistic shadows, most well-designed sites use shadows so subtle you don't consciously notice them.

    This generator lets you adjust all shadow parameters visually and see the result in real time. Tweak the values, layer multiple shadows, and copy the CSS. No more guessing at rgba values.

    Box Shadow Property Explained

    ValueWhat It DoesTypical Range
    X offsetHorizontal position of the shadow0 to 20px (right), -20 to 0px (left)
    Y offsetVertical position of the shadow2 to 30px (below, most common)
    Blur radiusHow soft/blurry the edge is4 to 40px (larger = softer)
    Spread radiusHow much the shadow expands/shrinks-5 to 10px (often 0 or negative)
    ColourShadow colour (usually translucent black)rgba(0,0,0,0.05 to 0.25)
    InsetPlaces shadow inside the elementUsed for input focus and pressed states

    What this means for you: For most card-style shadows, you want: small Y offset (2-8px), moderate blur (8-24px), zero spread, and very low opacity (0.05-0.15). The shadow should be barely visible, that's what makes it look realistic.

    Shadow Design Patterns

    Layered shadows (most realistic)

    Use 2-3 shadows of different sizes for realism. A tight, dark shadow near the element and a large, soft one further out mimics real-world lighting. Google's Material Design uses this approach.

    Hover elevation

    Increase shadow spread and blur on hover to create a "lifting" effect. Transition the box-shadow property for smooth animation. This works beautifully on cards and buttons.

    Coloured shadows

    Instead of black, use a darker shade of the element's background colour for its shadow. A blue card with a dark blue shadow looks more cohesive than one with a grey shadow. Glassmorphism popularised this technique.

    Inset shadows

    Inset shadows make elements look recessed or pressed in. Perfect for active button states, text input fields, and neumorphism effects. Combine with a subtle outer shadow for the classic "pressed button" look.

    Shadow Presets to Copy

    These are production-ready shadows used by popular design systems. Copy the one that fits your use case:

    NameCSSUse Case
    Subtle0 1px 3px rgba(0,0,0,0.08)Cards, list items
    Medium0 4px 12px rgba(0,0,0,0.1)Dropdowns, popovers
    Elevated0 8px 30px rgba(0,0,0,0.12)Modals, floating panels
    Layered (realistic)0 1px 2px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.07)Premium card feel
    Coloured glow0 4px 20px rgba(59,130,246,0.3)Focus states, CTAs
    Insetinset 0 2px 4px rgba(0,0,0,0.1)Input fields, pressed buttons

    Related Tools

    CSS Gradient Generator

    Create CSS gradients visually

    CSS Border Radius Generator

    Design rounded corners

    Colour Converter

    Convert HEX to RGBA for shadows

    CSS Minifier

    Minify CSS for production

    PX to REM Converter

    Convert pixel values to rem

    Colour Palette Generator

    Generate harmonious colour schemes

    How to use this tool

    1

    Adjust the X/Y offset, blur, and spread sliders

    2

    Pick a shadow colour and toggle inset if needed

    3

    Copy the generated CSS code to your stylesheet

    Common uses

    • Adding depth to card and panel components
    • Creating hover elevation effects on buttons
    • Designing neumorphism and glassmorphism UIs
    • Styling modal and dropdown overlays

    Share this tool

    Frequently Asked Questions

    What is box-shadow in CSS?
    box-shadow adds shadow effects around an element's frame, creating the illusion of depth. It takes up to six values: horizontal offset, vertical offset, blur radius, spread radius, colour, and an optional 'inset' keyword.
    Can I add multiple shadows?
    Yes. Separate multiple box-shadow values with commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08). Layered shadows look more realistic than a single shadow, this is what Material Design uses.
    What does the inset keyword do?
    Adding 'inset' places the shadow inside the element instead of outside. It creates a recessed or pressed-in effect. Great for active button states, input fields, and neumorphism design patterns.
    What shadow values look most realistic?
    Subtle shadows with small Y offset (2-8px), moderate blur (8-24px), zero spread, and low opacity (0.05-0.15). The shadow should be barely noticeable, that's what makes it convincing. Heavy, dark shadows look artificial.
    Does box-shadow affect layout?
    No. Box shadows don't take up space in the document flow, they don't push other elements around. They can extend beyond the element's boundaries and may be clipped by overflow: hidden on parent elements.
    Can I animate box-shadow?
    Yes, but it's expensive. Animating box-shadow triggers repaints on every frame. For smooth hover effects, use opacity transitions on a pseudo-element with the shadow already applied, or use filter: drop-shadow() which composites on the GPU.
    What's the difference between box-shadow and drop-shadow?
    box-shadow creates a rectangular shadow based on the element's box model. filter: drop-shadow() follows the actual shape, including transparent areas in images and SVGs. For non-rectangular shapes, drop-shadow is more accurate.
    How do I create a coloured shadow?
    Use a darker shade of the element's background colour instead of black. A blue card with rgba(37,99,235,0.2) shadow looks more cohesive than rgba(0,0,0,0.2). This technique was popularised by glassmorphism design.
    What's the performance impact of box-shadow?
    Single shadows have negligible performance impact. Multiple complex shadows (especially with large blur values) can slow rendering on lower-end devices. Limit to 2-3 shadows per element and avoid shadows on elements that animate frequently.
    Is my shadow CSS sent to a server?
    No. All shadow generation happens locally in your browser. The tool calculates CSS values client-side, nothing is transmitted.
    What shadow colours work in dark mode?
    In dark mode, rgba(0,0,0,0.3-0.5) works well since the background is already dark. Some designs use lighter glow effects instead: rgba(255,255,255,0.05) creates a subtle elevation glow. Test both approaches.
    How do I remove a box-shadow?
    Set box-shadow: none. To override an inherited or specific shadow, use box-shadow: none !important (as a last resort) or increase the specificity of your selector.

    Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.