CSS box-shadow Generator

Adjust shadow values with sliders and generate box-shadow CSS.

Category: Dev Tools

When to use?

Use it to add a shadow to UI elements like cards, buttons, and popovers, adjusting values with sliders and previewing live before generating CSS.

How to use

  • Adjust horizontal/vertical offset, blur, spread, and color with sliders.
  • Preview the shadow effect live.
  • Copy the generated box-shadow CSS.

Input Explanation

Adjust the shadow X/Y offset, blur, spread, color, and opacity with sliders.

Calculation Basis

It combines the slider values into a box-shadow: [X] [Y] [Blur] [Spread] [Color] rule and applies it live to the preview element's style.boxShadow.

Usage Examples

  • Adjust UI shadows - Generate a shadow for cards or popovers with a live preview.
  • Quick pre-deploy check - Check inputs and output to reduce errors before dev/ops work.
  • Aid docs/reviews - Copy the result into dev docs, issues, or review comments.

Examples

  • X: 10px, Y: 10px, Blur: 5px, Color: #000 → box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5)
  • X·Y 0, Blur 20, faint black → a soft floating-card shadow

Cautions

  • Generated output is for reference; test carefully before production use.
  • Specific specs or framework-only syntax may cause compatibility issues.

Guides

Box-shadow structure

box-shadow takes horizontal offset, vertical offset, blur radius, spread radius, and color in order. Prefixing inset makes an inner shadow.

Layering shadows

Apply several shadows at once separated by commas. Combining a subtle shadow with a wide spread to express depth is a common technique.

FAQ

Is opacity adjustable?

Yes, you can adjust the color and alpha together.

Can I preview the shadow?

Yes. Adjusting sliders reflects the shadow on the preview box live.

Can I stack multiple shadows?

Join box-shadow values with commas to layer several shadows.

Can I make an inner shadow?

Turn on the inset option for a shadow that goes inside the element for a pressed look.

Related Tools

  • CSS border-radius Generator - Check rounded-corner values with a preview and generate border-radius CSS.
  • CSS gradient Generator - Adjust colors and angle to generate linear-gradient CSS.
  • Color Code Converter - Convert HEX, RGB, RGBA, HSL, HSLA color codes to each other and preview the color.
  • JSON Formatter - Beautify or minify JSON strings instantly and check for validity errors.
  • UUID Generator - Generate up to 20 cryptographically secure UUID v4 values at once.
  • Password Generator - Generate secure random passwords in the browser by choosing length, character set, and count.