CSS Effect Generator produces glassmorphism, neumorphism, aurora, noise, and mesh-gradient styles from configurable parameters. It outputs raw CSS, Tailwind utility classes, and React inline-style objects simultaneously in a single call. Aurora animation includes a keyframes block, noise includes an inline SVG filter, and glassmorphism ships with both webkit and standard backdrop-filter prefixes.

How to use

1. Select an effect — Choose from glassmorphism, neumorphism, aurora, noise, or mesh-gradient.
2. Configure parameters — Set blur, opacity, colors, intensity, or density depending on the effect. All parameters are optional.
3. Choose output format — Select CSS, Tailwind, React inline, or "all" to get every format at once.
4. Copy and use — Copy the generated CSS, paste into your stylesheet or component. For aurora, also include the keyframes block.

MCP / API

Call css_effect_generator directly from any MCP-compatible agent:

// MCP TypeScript SDK
const result = await client.callTool({
  name: "css_effect_generator",
  arguments: {
    "effect": "glassmorphism",
    "params": {},
    "outputFormat": "css"
  }
});

// curl
curl -X POST https://obfus.link/mcp \
  -H "Authorization: Bearer <SPT>" \
  -H "Content-Type: application/json" \
  -d '{"method":"tools/call","params":{"name":"css_effect_generator","arguments":{"effect":"glassmorphism","params":{},"outputFormat":"css"}}}'

Related tools

FAQ