Free Tools/CSS Box Shadow Generator

CSS Box Shadow Generator

Build CSS box-shadow values visually with sliders for offset, blur, spread and colour. Copy the ready-to-use CSS.

Background

Box colour

Presets

Horizontal (X)0px

Vertical (Y)8px

Blur24px

Spread0px

Opacity30%

Shadow colour

Inset

CSS Output

box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.30);

CSS Tools

CSS without the guesswork

Visual generators and calculators for gradients, shadows, grid, flexbox and more — each with a live preview and copy-ready CSS for the result.

Related CSS tools

📐

CSS Unit Converter

Convert between px, rem, em, pt, vw and vh with configurable base font size and viewport.

Use tool →🌈

CSS Gradient Generator

Build linear and radial CSS gradients visually with colour stops, angle control and a live preview.

Use tool →⌒

CSS Border Radius Generator

Build border-radius values visually with per-corner sliders, presets and a live preview.

Use tool →(a,b,c)

CSS Specificity Calculator

Enter CSS selectors and instantly see their (a, b, c) specificity scores ranked with bar charts.

Use tool →

Explore more from Dino Media: All Free Tools · Our Services · Digital Glossary · Our Work

See Our Work

Like our eye for detail?

We design and build pixel-perfect, high-performing websites for ambitious UK businesses. Take a look at what we have created.

See Our Portfolio →