Box Shadow Generator API

Build a CSS box-shadow from one layer's settings, a JSON list of layers, or a named preset. Colours are validated and re-serialised.

POST /api/v1/tools/box-shadow-generatorMCP box_shadow_generatorDesign & Colour

Design CSS box shadows visually: set offset, blur, spread, colour and opacity, stack multiple layers or use inset shadows, then copy the box-shadow CSS.

Input

Send these as a JSON object. Unknown fields are rejected.

offsetX: Horizontal offset in px. (number, -1000 to 1000, default 0)
offsetY: Vertical offset in px. (number, -1000 to 1000, default 4)
blur: Blur radius in px. (number, 0 to 1000, default 12)
spread: Spread radius in px (negative shrinks the shadow). (number, -1000 to 1000, default 0)
color: Shadow colour: hex (#rgb, #rrggbb, #rrggbbaa), rgb(), rgba(), hsl() or hsv(). Colour names are not accepted. (string, up to 100 characters, default "rgba(0, 0, 0, 0.25)")
inset: Draw the shadow inside the box. (boolean, default false)
layers: Several layers as a JSON array (up to 6), each {"offsetX":0,"offsetY":4,"blur":12,"spread":0,"color":"#0003","inset":false}. Overrides the single-layer fields. (string, up to 5000 characters)
preset: A named shadow instead of the other fields. (string, one of Soft, Layered, Hard offset, Inset, Glow)

Try it in the browser JSON Schema Get an API key

curl https://pithlab.com/api/v1/tools/box-shadow-generator \n  -H "Authorization: Bearer $PITHLAB_KEY" \n  -H "Content-Type: application/json" \n  -d '{"offsetX":0,"offsetY":8,"blur":24,"spread":-4,"color":"rgba(15, 23, 42, 0.2)"}'

Example response

{
  "ok": true,
  "result": {
    "value": "0 8px 24px -4px rgba(15, 23, 42, 0.2)",
    "css": "box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.2);"
  }
}