CSS Box Shadow

Build a CSS box-shadow with a live preview.

• Design
• css
• shadow
• design

About

Build a CSS `box-shadow`. Inputs: `x`, `y`, `blur`, `spread` (px), `color` and optional `inset`. Returns the CSS declaration.

Parameters

Examples

• A soft drop shadow for a card.

Use it

In the browser: https://mcp.gholl.com/embed/box-shadow

As an AI tool: call box-shadow on the MCP endpoint https://mcp.gholl.com/mcp.

{
  "mcpServers": {
    "gholl": {
      "type": "http",
      "url": "https://mcp.gholl.com/mcp"
    }
  }
}

Related tools

• Color Studio & Contrast — Convert between hex/RGB/HSL, generate tints and shades, and check WCAG contrast against black and white.
• CSS Gradient Generator — Design a CSS gradient with a live preview and copy-ready code.
• CSS Border Radius — Shape CSS corners with a live preview.
• Color Palette — Generate a harmonious palette from a base color.
• Color Blindness Simulator — Preview a color under different color-vision deficiencies.
• QR Code Generator — Generate a QR code from text or a URL.
• Image to Base64 — Convert an image to a data URI / Base64.
• Image Compressor — Compress an image in the browser.
• Favicon Generator — Turn text or an emoji into a favicon.