CSS Effects Studio
Design gradients, box-shadows and border-radius with live previews and copy-ready CSS.
About
An interactive CSS design studio with three tabs: gradient, shadow and border-radius. Inputs (all optional): `tab` ("gradient" | "shadow" | "radius"), gradient `from`/`to`/`angle`/`kind`, shadow `x`/`y`/`blur`/`spread`/`color`/`inset`, and radius `tl`/`tr`/`br`/`bl`. Returns the resulting CSS. Use when a user wants a gradient, shadow or rounded-corner CSS.
Parameters
| Name | Type | Description |
|---|---|---|
tab | gradient | shadow | radius | (default: "gradient") |
from | string | (default: "#6366f1") |
to | string | (default: "#22d3ee") |
angle | number | (default: 135) |
kind | linear | radial | (default: "linear") |
x | number | (default: 0) |
y | number | (default: 12) |
blur | number | (default: 24) |
spread | number | (default: -6) |
color | string | (default: "#00000055") |
inset | boolean | (default: false) |
tl | number | (default: 24) |
tr | number | (default: 24) |
br | number | (default: 24) |
bl | number | (default: 24) |
locale | en | zh | (default: "en") |
Examples
- An indigo-to-cyan gradient at 135°.
- A soft card shadow.
Use it
In the browser: https://mcp.gholl.com/embed/css-effects
As an AI tool: call css-effects 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.
- 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.