Image & Design
CSS Shadow Generator
Adjust offset, blur, spread, colour and opacity with a live preview, then copy the finished box-shadow value.
FreeNo sign-upRuns in your browser
box-shadow: 0px 12px 28px -6px rgba(8, 21, 15, 0.22);How it works
- 1Adjust the shadow controls
- 2Preview the result live on a card
- 3Copy the box-shadow CSS
Who this is for
- Designing a card component's elevation
- Matching a shadow style from a design mockup
- Quick shadow experimentation
More tools
More in Image & Design
CSS Border Radius Generator
Builds an independent-corner border-radius with a live preview.
Image & Design
CSS Gradient Generator
Builds a linear CSS gradient with a live preview and copyable code.
Image & Design
Image Compressor
Compresses JPG, PNG or WebP images in your browser without uploading them anywhere.
Image & Design
Image Resizer
Resizes an image to a maximum width while preserving aspect ratio.
Image & Design
Image Cropper
Crops an image to a common aspect ratio, centred automatically.
Image & Design
JPG to PNG Converter
Converts JPG images to PNG format in your browser.
Image & Design
Ask AI about Internet Compass