Skip to main content
dubinity

Design & Accessibility

CSS Box Shadow Generator

Stack box-shadow layers with offsets, blur, spread and opacity, and copy the CSS.

  • Runs in your browser
  • Works on mobile
  • Out: CSS
Loading the tool…

Your files and text are processed on your own device, inside this page. Nothing is uploaded to Dubinity or stored, and closing the tab discards it. How privacy works

About CSS Box Shadow Generator

Shadows that look real are made of two or three layers - a tight dark one where the object meets the surface, and a wide soft one for ambient light - so this tool works in layers rather than a single blur slider.

Set the offset, blur, spread, colour and opacity of each layer, flip any of them to inset, and watch the preview on a light or dark background. The CSS you copy is exactly what the preview is drawing.

How to use it

  1. 1Start from a preset or add a layer.
  2. 2Set the horizontal and vertical offset, blur and spread.
  3. 3Choose the shadow colour and its opacity.
  4. 4Add a second layer for depth, then copy the box-shadow declaration.

Questions

Was this tool helpful?

Related tools

All design tools

  • CSS Gradient Generator

    Build linear, radial and conic CSS gradients with a live preview and copyable CSS.

    Runs in your browserOpen tool

  • CSS Border Radius Generator

    Shape each corner, including elliptical corners, and copy the shortest border-radius CSS.

    Runs in your browserOpen tool

  • Color Converter

    Convert a colour between HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH, with contrast against black and white.

    TEXT
    Runs in your browserOpen tool

  • Lorem Ipsum Generator

    Generate placeholder paragraphs, sentences or words, in classic Latin or in Arabic filler text.

    NONE
    Runs in your browserOpen tool

  • Color Palette Generator

    Generate colour palettes from a base colour and a harmony, or at random with locks, then export CSS, tokens, Tailwind or a PNG.

    HEX · RGB · HSL
    Runs in your browserOpen tool

  • Color Contrast Checker

    Check the WCAG 2.2 contrast ratio of a text and background colour, with AA and AAA verdicts and the nearest passing colour.

    HEX · RGB · HSL
    Runs in your browserOpen tool