Glassmorphism pricing

Glassmorphism for a pricing

A glassmorphism pricing page floats three frosted plan cards over an aurora gradient, using the glass to create a soft sense of depth between tiers. The featured plan should lift through a brighter fill and a glowing border, not a different shape, so the comparison grid stays aligned. The risk here is feature-list legibility: dense check-and-label rows need the card's more opaque inner region, while the price and headline can ride the translucent edge and the gradient text-clip.

Glassmorphism SaaS pricing page: three frosted plan cards with a featured Pro tier over a violet-pink-cyan aurora gradient, generated with Superdesign
A real generated UI from the Superdesign library item Aurora Glass SaaS Pricing: frosted plan cards with a glowing featured tier over an aurora gradient. See it live.

This page is about applying the glassmorphism recipe to a pricing. The full CSS recipe (the exact tokens, fallbacks and gotchas) lives on the Glassmorphism pillar page; here we focus on what changes when the build type is a pricing, then hand you a prompt tuned for it.

Generate a glassmorphism pricing

Generate it on Superdesign

This prompt is tuned to the exact tokens in the recipe above. Copy it, paste it into the prompt box, and you get a full UI in this style on an infinite canvas. Free to start.

Design a dark glassmorphism SaaS pricing page on a violet-pink-cyan aurora gradient. Sticky blurred nav, a centered hero with a gradient headline and a monthly/annual billing toggle, then three frosted plan cards (Starter, Pro, Team) where the Pro tier is featured with a glowing border and a brighter fill. Each card lists a price, a feature list with check icons, and a CTA. Reflow from 3 columns to 2 to 1. Finish with an FAQ accordion and a slim footer. Add subtle film grain so the glass does not look flat. Keep feature text on the more opaque inner area of each card.

Copies the prompt and opens Superdesign in a new tab.

Using the Superdesign skill from Claude Code or Cursor?

Paste this tuned style prompt into your coding agent. It carries the same tokens as the recipe, so what the agent builds matches what this page teaches.

style prompt
Build a glassmorphism pricing page with these tokens:
- Canvas: near-black violet base with a violet #8b5cf6 -> pink #ec4899 -> cyan
  #22d3ee aurora gradient, plus subtle film grain
- Plan cards: frosted glass rgba(255,255,255,0.07) fill, backdrop-filter
  blur(18px) saturate(150%), 1px white hairline border + inner highlight, 20px radius
- Featured (Pro) tier: brighter fill (rgba 0.12) and a glowing gradient border so
  it lifts without changing the layout grid
- Feature lists: place on the higher-fill inner region of the card; check icons
  in the cyan accent; price uses the gradient text-clip
- Billing toggle swaps price + suffix live (monthly/annual, "Save 20%")
- Reflow 3 -> 2 -> 1 column; FAQ accordion below
- Pair backdrop-filter with -webkit-backdrop-filter and an opaque @supports fallback

/* via superdesign.dev/styles/glassmorphism/pricing */

Glassmorphism pricing examples

Aurora Glass SaaS Pricing, a real glassmorphism pricing example

Aurora Glass SaaS PricingSuperdesign library

Three glass tiers on an aurora backdrop; the Pro card lifts with a brighter fill and a gradient glow while the grid stays aligned.

Frequently asked questions

How do you highlight the featured plan on a glass pricing page?
Raise the featured card's fill opacity (say from 7% to 12%) and add a glowing gradient border, rather than changing its size or shape. That keeps the three-column comparison grid aligned while the eye still lands on the recommended tier. A small 'Most popular' badge in the accent color seals it.
Where does text break on a glassmorphism pricing card?
In the feature list. Long rows of small check-and-label text over a moving gradient lose contrast fast. Put the list on the card's more opaque inner region and reserve the translucent, gradient-clipped treatment for the plan name, the price and the headline.

Keep exploring

Glassmorphism: the full recipe →

Frosted glass panels: translucent fill, backdrop blur, a thin light border, layered over a colorful backdrop.

Glassmorphism website →

The same style applied to a website.

Glassmorphism dashboard →

The same style applied to a dashboard.

Glassmorphism card →

The same style applied to a card.

Glassmorphism mobile app →

The same style applied to a mobile app.

Glassmorphism login →

The same style applied to a login.

Browse every style in the design styles encyclopedia.