# Glassmorphism generator

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.

Open the generator: https://morph.ogeny.app/glassmorphism/

## Design choices

- **Frosted glass** (`surface.glass`): Translucent layers over blurred backdrops. Set by “Glass panes”. https://stylogeny.com/design-choices/frosted-glass/
- **Illusion of depth** (`space.depth-illusion`): Perspective, overlap, shadow or parallax create a z-axis. “Glass panes”: Stacked cards. https://stylogeny.com/design-choices/illusion-of-depth/
- **Cards & bento tiles** (`layout.bento`): Content partitioned into rounded tiles or cards of varied size. “Glass panes”: Bento grid. https://stylogeny.com/design-choices/cards-and-bento-tiles/
- **Gradients** (`color.gradient`): Smooth blends, fades or spectral ramps. Set by “Gradients”. https://stylogeny.com/design-choices/gradients/
- **3D render** (`image.3d-render`): Computer-generated objects, scenes and textures. “Gradients”: Glossy orbs. https://stylogeny.com/design-choices/3d-render/
- **Rounded & pill** (`form.rounded`): Soft corners, capsules and blobs. Always. https://stylogeny.com/design-choices/rounded-and-pill/
- **Biomorphic curves** (`form.organic`): Soft, cell-like, plant-like forms. Always. https://stylogeny.com/design-choices/biomorphic-curves/
- **Grotesque & neo-grotesque** (`type.grotesque`): Neutral, rational sans: Akzidenz-Grotesk, Helvetica, Univers. Always. https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/
- **Ornament-free** (`ornament.none`): Decoration rejected; form follows function. Always. https://stylogeny.com/design-choices/ornament-free/

## How it 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.

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.

## Controls

- `glass` Glass panes (none | card | stack | bento; default card): What floats over the colour: nothing but type, one frosted card, cards stacked at different depths, or a grid of tiles.
- `backdrop` Gradients (mesh | orbs; default mesh): The colour behind the glass: soft blobs of light that melt into each other, or glossy spheres floating over them.
- `text` Headline (default "Soft focus"): Set as large as it fits, on one to three lines.
- `sub` Small line (default "Light through frosted glass"): A short line under the headline.
- `frost` Frost (0–1, default 0.6): How much the glass blurs what lies behind it: 0 is clear glass.
- `spots` Colour spots (2–9, default 5): How many blobs of light, or spheres.
- `depth` Illusion of depth (0–1, default 0.5): Shadows, how much the glass magnifies, and how far stacked cards turn.
- `tint` Glass tint (clear | smoke; default clear): Glass tinted with the palette’s lightest colour, or darkened with its darkest.

## 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 in Stylogeny (2020–today): https://stylogeny.com/styles/glassmorphism/

## Recipe

```json
{
  "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"
}
```