Soft gradients of coloured light behind frosted glass cards that carry your headline and small interface pieces. Export a vector file, a print-size PNG or a slow loop.
What makes it Glassmorphism
These are the design choices this generator makes or lets you set. Where a choice says “Measured”, Morphogeny changed that control alone, kept everything else, and measured the picture: a number that moves with the choice, not proof that the picture reads as the style.
- Translucent layers over blurred backdrops. Set by “Glass panes”.
- Perspective, overlap, shadow or parallax create a z-axis. “Glass panes”: Stacked cards.
- Content partitioned into rounded tiles or cards of varied size. “Glass panes”: Bento grid.
- Smooth blends, fades or spectral ramps. Set by “Gradients”.
- Computer-generated objects, scenes and textures. “Gradients”: Glossy orbs.
- Soft corners, capsules and blobs. Always.
- Soft, cell-like, plant-like forms. Always.
- Neutral, rational sans: Akzidenz-Grotesk, Helvetica, Univers. Always.
- Decoration rejected; form follows function. Always.
How this generator works
- A field of soft coloured light (blobs that fade to nothing, or glossy spheres over them) seen through translucent panes that blur and slightly magnify it.
- Each pane has a faint tint, a highlight from the top left, a hairline border that is brightest at the top left, and a soft shadow, so its edge holds against the colour.
- Type and interface pieces sit on the glass in one ink, chosen from the palette for contrast with what lies behind.
What it never does:
- No logos, brand marks, real app screens or operating-system wallpapers: the interface pieces are generic (bars, switches, a figure, a chart).
- No hard shadows, paper textures or earth tones; never more than three overlapping panes.
- Animation drifts, swells and turns the light behind the glass and lets the panes float a little; the ink on the glass never changes during the loop.
Every picture is a recipe: the variation number and the settings, kept in the page's address. Copy the link and the same picture comes back, in any browser. Random (or R) draws a new variation; ← and → step through them; S shuffles the settings; C borrows another style's colours.
About Glassmorphism
Glassmorphism is the interface look of translucent, frosted panels floating over vivid colour, named around 2020 and rooted in the glass effects of desktop and phone systems from the 2000s on. Depth and hierarchy come from layered transparency: what lies behind a pane is blurred until only its colour reads, and a faint white edge keeps the pane apart from the background.
This generator grows the colour first: blobs of light from the palette that melt into each other, or glossy spheres floating over them. Each glass pane then draws that field again, blurred by the frost and slightly magnified, with a tint, a highlight from the top left and a hairline border. The type and the small interface pieces on it take whichever palette colour reads best on what lies behind.
Use it for a gradient background with nothing on it (one card, frost at zero, or no panes and no text), a social post or slide with a headline, or a mock interface tile. The light can drift slowly behind the glass as a seamless loop.
Glassmorphism: 2020–today. What the controls mean: Help.
Use it from code
The recipe below draws the picture this page opens with. Copy recipe gives you the one on screen. Agents can render recipes to SVG or PNG through Morphogeny's MCP server (morphogeny_render); the same recipe always gives the same SVG.
{
"tool": "glassmorphism",
"v": 1,
"seed": 1,
"format": "portrait",
"params": {
"glass": "card",
"backdrop": "mesh",
"text": "Soft focus",
"sub": "Light through frosted glass",
"frost": 0.6,
"spots": 5,
"depth": 0.5,
"tint": "clear"
},
"palette": "glassmorphism"
}Open this recipe: /glassmorphism/#seed=1&v=1. A plain-text version of this page:/glassmorphism.md.