Design style: glassmorphism

Glassmorphism, and why frascati leaves it out

Glassmorphism sets frosted, see-through panels over colourful backgrounds. It can look rich, but text on glass is hard to read. frascati uses solid surfaces.

What defines it

  • Semi-transparent panels that blur what lies behind them
  • Colourful gradients or shapes showing through the glass
  • Thin, light borders along the panel edges
  • Soft shadows that lift the panels off the page

Where it fits

  • App and operating system interfaces, where the blur shows what lies underneath
  • Small overlays, such as a menu over a photo
  • Short headlines on a single panel rather than long texts

A prompt to start from

Copy it into frascati and change the details to yours.

Example prompt
“Build a website for our spa in Lucerne. A calm off-white background, one deep teal accent, large photos of the treatment rooms and the pool, our treatments as a clear list and a contact form for appointment requests.”

The first version takes about two minutes.

Questions

Does frascati build glassmorphism websites?
No. frascati leaves glassmorphism out by design, together with glow and decorative gradients. It uses solid surfaces in one paper colour and gets depth from thin lines and tone.
What are the trade-offs of glassmorphism?
Text on a see-through panel changes contrast wherever the background behind it changes, so it is hard to keep readable. Blur effects also take processing power, which can make scrolling less smooth on older phones.
What does frascati do instead?
One paper colour, one accent colour, thin lines between sections and large real photos. Where a section needs to stand out, it sits on a slightly darker tone of the paper, not behind glass.

Your website, about two minutes from now

3 days free with a card, then from $12 a month. The plan starts automatically unless you cancel.

Start free trial