ConvertBase.app

Generators

Box Shadow Generator

Build CSS box shadows with offsets, blur, spread, opacity and copy-ready output.

Quick answer

Create clean, professional CSS box-shadow values in seconds. Adjust offset, blur, spread, color and opacity, then copy the result for your site or app.

Preview

CSS code

box-shadow: 0px 18px 36px 0px rgba(15, 23, 42, 0.25);

Overview

This box shadow generator helps you build accurate CSS shadows with a live preview and instant code output. It is useful for buttons, cards, dialogs, images and other UI elements that need depth and visual separation.

Use cases

  • Design shadows for cards, buttons and modals.
  • Create subtle elevation effects for dashboards and landing pages.
  • Generate inset shadows for inputs and panels.
  • Test different shadow styles quickly without manual CSS tweaking.

How it works

  1. 1

    Set the horizontal and vertical offsets.

  2. 2

    Adjust blur, spread and opacity to match the style you want.

  3. 3

    Choose shadow color and optional inset mode.

  4. 4

    Preview the shadow live as you edit.

  5. 5

    Copy the generated CSS and paste it into your stylesheet.

Examples

Soft card shadow

Input: 0 8px 24px 0 rgba(0,0,0,0.12)

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

A soft shadow for cards and content blocks.

Strong button shadow

Input: 0 4px 12px -2px rgba(0,0,0,0.25)

Output: box-shadow: 0 4px 12px -2px rgba(0,0,0,0.25);

A more defined shadow for interactive elements.

FAQ

What CSS property does this generator create?

It creates box-shadow values that you can use directly in CSS.

Can I make inset shadows?

Yes. Enable inset mode to generate an inner shadow effect.

Is the output ready to copy?

Yes. The generated CSS is formatted for quick copy and paste.

Does it work for multiple shadows?

You can combine values manually if you need more than one shadow layer.

Box Shadow Generator | ConvertBase.app