Our Tutorials

HTML CSS SQL

Tools

Data

JSON Validator CSV / JSON Converter HTML Formatter CSS Formatter SQL Formatter XML Formatter Markdown Preview Regex Generator

SEO

Meta tag Generator

Design

Design the Scroll bar Box Shadow Generator Border Radius Generator CSS Gradient Generator Color Converter Image Converter Encode and Decode Images

Free Online CSS Box Shadow Generator

Create CSS box shadows and text shadows with sliders, presets, colors, inset mode and live preview.

Box Shadow Tool

CSS Code

Use on any element

Controls

Offsets, blur, spread and color

Preview

soft card
TEST TEXT
Box shadow Preview card

Presets

Click one to apply it

How CSS shadows work

box-shadow paints a shadow around an element box. The horizontal and vertical offsets move the shadow, blur softens it, spread expands or shrinks it, and color controls the final tone and alpha.

text-shadow uses a similar idea, but it applies to glyphs instead of the element box. It supports offset, blur and color, but not spread or inset.

Use small shadows for interface depth and stronger shadows only when the element really needs emphasis. Shadows are easy to add; restraint is the part CSS refuses to automate.

Related CSS topics