Elysia Tools Docs
ES
Idioma
ZHESPTRUFRDEEN
Volver al sitio
Explorar herramientas

Design

Generador de snippets CSS glassmorphism / neumorfismo

Genera el snippet CSS completo de glassmorphism o neumorfismo de punta a punta: ajusta desenfoque, saturación, opacidad del tinte, radio, borde, sombra externa y brillo superior; opcionalmente superposición de grano SVG feTurbulence y degradación @supports; incluye automáticamente el prefijo -webkit-backdrop-filter (obligatorio antes de Safari 18) y el mapeo a clases Tailwind (con la nota de diferencias v3/v4), con vista previa en vivo de la tarjeta sobre un fondo degradado.

html· Resultado HTMLAbrir herramienta

Inicio rápido

Llama a esta herramienta desde tu código en tres lenguajes.

cURL
curl -X POST 'https://api.elysiatools.com/es/api/tools/glassmorphism-css-snippet-builder' \
  -H 'Content-Type: application/json' \
  -d '{"style":"glass","blurPx":12,"saturatePct":160,"tintColor":"#ffffff","tintAlpha":0.15,"radiusPx":16,"borderWidth":1,"borderAlpha":0.25,"shadowAlpha":0.12,"topHighlight":true,"noiseOverlay":true,"includeFallback":true,"neuBgColor":"#e0e5ec","neuDistance":9,"neuPressed":false,"neuDark":false}'

© 2026 Elysia Tools. Documentación para desarrolladores.

Volver al sitioExplorar herramientas

Referencia de la API

Envía una petición POST con tus entradas en JSON. Los parámetros de tipo archivo requieren una subida previa.

Endpoint

HTTP
POST https://api.elysiatools.com/es/api/tools/glassmorphism-css-snippet-builder

Parámetros

NombreTipoObligatorioDescripción
styleselectNo—
blurPxnumberNo—
saturatePctnumberNo—
tintColorcolorNo—
tintAlphanumberNo—
radiusPxnumberNo—
borderWidthnumberNo—
borderAlphanumberNo—
shadowAlphanumberNo—
topHighlightcheckboxNo—
noiseOverlaycheckboxNo—
includeFallbackcheckboxNo—
neuBgColorcolorNo—
neuDistancenumberNo—
neuPressedcheckboxNo—
neuDarkcheckboxNo—

Formato de respuesta

Resultado HTML

JSON
{
  "result": "<div>Processed HTML content</div>",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}

Integración MCP

Añade esta herramienta a tu servidor Model Context Protocol para que los agentes de IA puedan listarla y llamarla.

Configuración del servidor

Añade este bloque a la configuración de tu cliente MCP:

mcp.json
{
  "mcpServers": {
    "elysiatools-glassmorphism-css-snippet-builder": {
      "name": "glassmorphism-css-snippet-builder",
      "description": "Genera el snippet CSS completo de glassmorphism o neumorfismo de punta a punta: ajusta desenfoque, saturación, opacidad del tinte, radio, borde, sombra externa y brillo superior; opcionalmente superposición de grano SVG feTurbulence y degradación @supports; incluye automáticamente el prefijo -webkit-backdrop-filter (obligatorio antes de Safari 18) y el mapeo a clases Tailwind (con la nota de diferencias v3/v4), con vista previa en vivo de la tarjeta sobre un fondo degradado.",
      "baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=glassmorphism-css-snippet-builder",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Listar herramientas disponibles

Tras conectar al endpoint SSE, lista las herramientas expuestas:

tools/list
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/list"
}

Llamar a esta herramienta

Invoca la herramienta por su id; los argumentos se construyen a partir de sus parámetros:

tools/call
{
  "jsonrpc": "2.0",
  "id": 2,
  "method": "tools/call",
  "params": {
    "name": "glassmorphism-css-snippet-builder",
    "arguments": {
  "style": "glass",
  "blurPx": 12,
  "saturatePct": 160,
  "tintColor": "#ffffff",
  "tintAlpha": 0.15,
  "radiusPx": 16,
  "borderWidth": 1,
  "borderAlpha": 0.25,
  "shadowAlpha": 0.12,
  "topHighlight": true,
  "noiseOverlay": true,
  "includeFallback": true,
  "neuBgColor": "#e0e5ec",
  "neuDistance": 9,
  "neuPressed": false,
  "neuDark": false
}
  }
}
Encadena varias herramientas en una sesión con una lista toolId separada por comas, p. ej. /mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp (máx. 20).

¿Dudas o problemas? Contacta con [email protected]

Explorar herramientas
Abrir herramienta