Home > Design > Box Shadow Generator

Other Tools

Color PickerCSS Gradient GeneratorPX to PT ConverterPX to REM ConverterPX to EM ConverterOnline Flashlight / Screen Night LightOnline Dead Pixel TestSVG Online PreviewImage Round CornersImage Layer Composer

Box Shadow Generator

Generate CSS box-shadow code with visual controls, supports inset/outset, opacity and live preview

px
px
px
px
%
Shadow Preview
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);

Tool Overview: CSS Box Shadow Generator

CSS Box Shadow Generator helps you quickly create box-shadow styles with visual controls. It supports inset and outset shadows, live preview, and copy-ready CSS code.

What Is CSS Box Shadow Generator?

It lets you configure shadow offset, blur, spread, and color without manual string building, then outputs standard box-shadow CSS.

How to Use

  1. Adjust offset, blur, and spread values.
  2. Pick a color and set opacity.
  3. Toggle inset for inner shadow if needed.
  4. Copy the generated CSS code.

Common Use Cases

  • Add depth to cards, buttons, and panels
  • Translate design specs into CSS quickly
  • Tune shadow strength and direction
  • Create subtle UI elevation styles

❓ FAQ

Q1: The shadow feels too strong or too weak.
A: Tweak blur and opacity first, then adjust spread.

Q2: The direction looks wrong.
A: Positive offset moves right/down, negative moves left/up.

Q3: When should I use inset?
A: Use inset for recessed effects like inputs or inner borders.

Features

  • Live preview with instant updates
  • Full parameter control
  • Inset/outset toggle
  • One-click copy

Parameters

  • Offset X / Y: Horizontal and vertical shift
  • Blur: Softness of the shadow
  • Spread: Expansion or contraction of the shadow
  • Color: Shadow color and opacity

CSS Examples

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

box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.25);

Tips

  1. For cards, use larger blur with low opacity.
  2. For hover states, increase blur and reduce offset.
  3. Combine multiple shadows for richer depth.