Pockit

🚀 Pockit is now on Chrome!

Stop searching on Google. Access tools instantly with 1-click.

Add to Chrome - It's Free

Privacy Guaranteed

All processing happens locally in your browser. Your data never leaves this device.

Box Shadow Generator

Design depth and elevation visually. Create perfect CSS box-shadows and copy the code instantly.

Presets

0px
10px
20px
0px
0.30

Preview

CSS Code

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.3);

Tip: Adjust the sliders to see the shadow effect change in real-time!

CSS Box Shadow Generator

Visually design CSS box-shadows using sliders. Preview the effect on a card element and copy the generated CSS code instantly.

1When to use this tool?

💡Adding depth to buttons or card UIs
💡Experimenting with soft shadow effects
💡When writing CSS code manually is tedious

2Features

  • Interactive sliders for all properties
  • Real-time preview
  • Support for inset shadows
  • One-click CSS copy

3How to Use

  • Adjust the X and Y offsets, blur, and spread radius.
  • Change the shadow color and opacity.
  • Toggle 'Inset' for inner shadows.
  • Copy the CSS code to your project.

FAQ

Q. What is the spread radius?

A. The spread radius increases or decreases the size of the shadow. Positive values make it larger, negative values make it smaller.

Recommended Tools

Try Now

Color Palette Generator
Create stunning color schemes in seconds. Generate harmonious palettes from the color wheel, extract colors from images, check WCAG contrast—perfect for web design, branding, and UI/UX projects.
Try it
HTML to Markdown Converter
Convert HTML to clean Markdown instantly. Extract content from web pages, blogs, and documents. Customizable heading styles, code blocks, and list formats. 100% browser-based.
Try it
Markdown to HTML Converter
Convert Markdown to HTML instantly with live preview and syntax highlighting. Supports GFM—tables, strikethrough, task lists. Export full HTML documents or snippets. Perfect for blogs, docs, README files. 100% browser-based MD parser.
Try it