Glassmorphism API

Control and configure glassmorphism components using this RESTful API. Manage blur, transparency, color themes, and animated properties programmatically.

Get Started with 3 API Calls

1. Set Base Properties
fetch('/demos/api/glassmorphism/config', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ blur: 12, opacity: 0.6 })
})
2. Add Color Theme
GET /demos/api/glassmorphism/themes/indigo
// Returns gradient and color palettes
3. Get Element State
fetch('/demos/api/glassmorphism/state')
    .then(response => response.json())

Base API Endpoint

GET
/demos/api/glassmorphism
Returns: Available configurations, themes and current state
Public JSON

Example Response

{
    "status": "success",
    "available_themes": ["indigo", "teal", "rose", "emerald"],
    "current_config": {
        "blur": 10,
        "opacity": 0.5,
        "theme": "indigo"
    }
}

/config Endpoint

POST
PUT
GET
/demos/api/glassmorphism/config
Manages: Blur, opacity, border-radius, and animation settings

POST/PUT: Set new properties

GET: Get active configuration

Protected JSON

Request Body Example

{
    "blur": 18,
    "opacity": 0.3,
    "corner_radius": "rounded-3xl"
}
Use Authorization: Bearer YOUR_TOKEN header for write operations.

/themes Endpoint

GET
/demos/api/glassmorphism/themes/{theme-name}
Returns: Gradient backgrounds with hue rotation, shadow styles and accent colors
Public Gradient

/elements Endpoint

POST
/demos/api/glassmorphism/elements
Creates: New glassmorphic components with customizable z-index, positioning and interactivity
Protected JSON
Query Parameters:
  • type: card/modal/overlay
  • z-index: [int]
Response:
  • elementId
  • position: {x,y}
  • style: css properties

/animations Endpoint

POST
/demos/api/glassmorphism/animations
Controls: Entrance animations, hover effects, and transition durations
Protected Animation

Available Effects

fade-in-up, slide-left, float, scale-on-hover
Animations require valid Authorization and active session

Code Samples

Get Current Config

fetch('/demos/api/glassmorphism/config')
    .then(response => response.json())
    .then(data => console.log('Current Settings:', data))

Update Configuration

fetch('/demos/api/glassmorphism/config', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ blur: 20, opacity: 0.4 })
})
.then(response => response.json())
.then(console.log)