CSS Box Shadow Generator

Adjust box-shadow offsets, blur, spread, opacity, radius, and inset locally in the browser with live preview and copy-ready CSS output.

CSS Box Shadow Generator

The CSS Box Shadow Generator lets you adjust horizontal and vertical offset, blur radius, spread radius, opacity, border radius, and inset locally in the browser while previewing the result on cards or buttons in real time.

How do you use it?

  1. Adjust horizontal offset, vertical offset, blur radius, and spread radius.
  2. Choose shadow color, background color, and set opacity and border radius.
  3. Toggle inset when you need an inner shadow.
  4. Copy the generated CSS into your component styles or design handoff notes.

Features

  • Visual controls for the most common box-shadow parameters
  • Supports both outer and inset shadows
  • Local live preview with copy-ready CSS output

Why use this tool?

  • Tune depth for cards, buttons, inputs, and floating surfaces quickly
  • Reduce time spent hand-writing shadow syntax and refreshing to test
  • Share implementation-ready CSS values between design and frontend work

Related Color Tools

GIF Maker

Convert static images or video clips into animated GIFs.

Image Resizer

Resize images in batches by pixels or percentage, with aspect ratio lock and local export.

Image to ICO

Convert images into ICO files for favicons and app icons, with multiple sizes packed into one file.

SVG to PNG/JPG

Export SVG files as PNG or JPG with custom size, background, and local download.

SVG Optimizer

Optimize SVG markup locally in your browser, remove extra metadata, and export a cleaner SVG file.

EXIF Viewer

Read EXIF, GPS, camera, and shooting metadata from images locally in your browser.

Image Metadata Cleaner

Remove EXIF, XMP, ICC, and other metadata from JPEG, PNG, and WebP images locally in your browser.

Image Palette Extractor

Extract dominant colors, ratios, and palettes from an image, then export HEX, CSS, or JSON locally.

Color Picker

Pick colors from manual input, your screen, or uploaded images locally in the browser, then copy HEX, RGB, HSL, HSV, CMYK, and CSS values.

Color Converter

Convert colors between HEX, RGB, HSL, HSV, HWB, LAB, LCH, CMYK, and CSS keywords locally in the browser with bidirectional updates and alpha support.

Color Contrast Checker

Check WCAG contrast ratios for foreground and background colors locally in the browser, including AA/AAA for normal and large text.

CSS Gradient Generator

Build linear, radial, and conic gradients locally in the browser with editable color stops, live preview, and copy-ready CSS output.

HTML Color Names

Browse and search common HTML / CSS named colors locally in the browser, then copy the color name, HEX, or RGB value.

Favicon Generator

Generate common favicon assets, site.webmanifest, and HTML include snippets from one source image.

Gemini Watermark Remover

Remove Gemini visible watermarks locally in your browser, with batch processing and downloads.

Image to AVIF

Convert PNG, JPG, and other images to AVIF in batches with quality, scaling, and ZIP export.

PNG Compressor

Compress PNG files while keeping PNG output, with scaling, color reduction, previews, and ZIP download.

Image to WebP

Convert PNG, JPG, and other images to WebP in batches with quality, scale, previews, and ZIP download.