31 CSS Hero Sections04 / 31

Pure CSSMIT licensed

Glass over Aurora

Frosted-glass card floating over a calm spa aurora — pale mint, champagne gold, soft rose. The wellness / luxury beauty editorial treatment.

Published

Live Demo
Try it

The code

<section class="hs-04" aria-label="Hero">
  <div class="hs-04__aurora" aria-hidden="true"></div>
  <article class="hs-04__card">
    <span class="hs-04__eye">A daily ritual</span>
    <h2>Skincare without <em>the homework.</em></h2>
    <p>Three minutes. Two products. One routine that fits the life you actually live.</p>
    <a class="hs-04__cta" href="#start">Find your routine</a>
  </article>
</section>
.hs-04 {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: radial-gradient(circle at 20% 20%, #d6f0e0 0%, transparent 50%), radial-gradient(circle at 85% 30%, #f9d4c8 0%, transparent 55%), radial-gradient(circle at 50% 90%, #f3e3c0 0%, transparent 50%), #faf6ed;
  font-family: 'Inter', system-ui, sans-serif;
  color: #3d3a2c;
  box-sizing: border-box;
  contain: layout paint;
}

.hs-04__aurora {
  position: absolute;
  inset: -10%;
  background: conic-gradient(from 90deg, #d6f0e0, #f9d4c8, #f3e3c0, #d6f0e0);
  filter: blur(50px);
  opacity: 0.5;
  animation: hs-04-spin 30s linear infinite;
}

@keyframes hs-04-spin {
  to {
    transform: rotate(360deg);
  }
}

.hs-04__card {
  position: relative;
  z-index: 1;
  max-width: 520px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 22px 60px rgba(195,150,120,0.18);
}

.hs-04__eye {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: #b8956a;
  margin-bottom: 14px;
}

.hs-04 h2 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: #2a2818;
}

.hs-04 h2 em {
  color: #b8956a;
  font-weight: 600;
}

.hs-04 p {
  margin: 0 auto 24px;
  font-size: 15px;
  line-height: 1.6;
  color: #6b6755;
  max-width: 380px;
}

.hs-04__cta {
  display: inline-block;
  padding: 12px 28px;
  background: #2a2818;
  color: #faf6ed;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.18s;
}

.hs-04__cta:hover {
  background: #b8956a;
}

@media (prefers-reduced-motion: reduce) {
  .hs-04__aurora {
    animation: none;
  }

  .hs-04__cta {
    transition: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Hero Section from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Glass over Aurora
Source: https://codefronts.com/layouts/css-hero-sections/glass-over-aurora/

Frosted-glass card floating over a calm spa aurora — pale mint, champagne gold, soft rose. The wellness / luxury beauty editorial treatment.
## HTML
```html
<section class="hs-04" aria-label="Hero">
  <div class="hs-04__aurora" aria-hidden="true"></div>
  <article class="hs-04__card">
    <span class="hs-04__eye">A daily ritual</span>
    <h2>Skincare without <em>the homework.</em></h2>
    <p>Three minutes. Two products. One routine that fits the life you actually live.</p>
    <a class="hs-04__cta" href="#start">Find your routine</a>
  </article>
</section>
```
## CSS
```css
.hs-04 {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: radial-gradient(circle at 20% 20%, #d6f0e0 0%, transparent 50%), radial-gradient(circle at 85% 30%, #f9d4c8 0%, transparent 55%), radial-gradient(circle at 50% 90%, #f3e3c0 0%, transparent 50%), #faf6ed;
  font-family: 'Inter', system-ui, sans-serif;
  color: #3d3a2c;
  box-sizing: border-box;
  contain: layout paint;
}

.hs-04__aurora {
  position: absolute;
  inset: -10%;
  background: conic-gradient(from 90deg, #d6f0e0, #f9d4c8, #f3e3c0, #d6f0e0);
  filter: blur(50px);
  opacity: 0.5;
  animation: hs-04-spin 30s linear infinite;
}

@keyframes hs-04-spin {
  to {
    transform: rotate(360deg);
  }
}

.hs-04__card {
  position: relative;
  z-index: 1;
  max-width: 520px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 22px 60px rgba(195,150,120,0.18);
}

.hs-04__eye {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: #b8956a;
  margin-bottom: 14px;
}

.hs-04 h2 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: #2a2818;
}

.hs-04 h2 em {
  color: #b8956a;
  font-weight: 600;
}

.hs-04 p {
  margin: 0 auto 24px;
  font-size: 15px;
  line-height: 1.6;
  color: #6b6755;
  max-width: 380px;
}

.hs-04__cta {
  display: inline-block;
  padding: 12px 28px;
  background: #2a2818;
  color: #faf6ed;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.18s;
}

.hs-04__cta:hover {
  background: #b8956a;
}

@media (prefers-reduced-motion: reduce) {
  .hs-04__aurora {
    animation: none;
  }

  .hs-04__cta {
    transition: none;
  }
}
```

How this works

The card is a frosted-glass surface floating over a rotating conic-gradient aurora — the exact optical language Apple uses for Vision Pro marketing pages and the wellness/luxury-beauty editorial world uses for premium routines. The aurora is a full-bleed <div> with inset: -10% (extending past the section edges so the blurred rotation never reveals bare corners), a conic gradient cycling through mint, rose, and champagne, and filter: blur(50px) to soften it into weather. The card sits on top with backdrop-filter: blur(20px) saturate(140%) — the saturation boost is what makes real frosted glass, not gray glass. Without it the aurora colors bleed through as muted grey; with it they read as real fabric behind real glass.

The palette is spa/apothecary: pale mint (#d6f0e0), champagne gold (#b8956a), pale rose (#f9d4c8), warm bone base (#faf6ed), and deep bone text (#2a2818). Cormorant Garamond at font-weight: 500 — not 700, not 900 — for the h2 gives it the quiet-luxury register; heavy weights on a wellness hero read as pharmacy, not spa. The italic eyebrow in Cormorant is a small detail that signals "editorial magazine, not landing page." The dark pill CTA that shifts to champagne gold on hover is the conversion path — dark on light is the highest-contrast element in the composition, and the gold hover state is a small reward.

Why it converts: luxe/wellness buyers are risk-averse and taste-first. They scan for "is this brand of my caliber" before they read any product claim, and glass-over-aurora is the current visual signal for "premium 2026." The frosted card also does a functional job — it stabilizes the text over an animated background, so the body copy never becomes unreadable as the aurora rotates. That readability preservation is what separates a real production hero from a designer concept: the effect works, and the customer can still read the price.

Make it yours

  • Recolor the aurora by editing the four conic-gradient stops (#d6f0e0, #f9d4c8, #f3e3c0, #d6f0e0) — keep them all in a tight tonal range (max ~30 degrees of hue spread) or the aurora reads as neon, not weather. For a cool spa palette shift to #e0f0f5, #d8e0f0, #e5f5e8, #e0f0f5.
  • Swap the serif: Cormorant Garamond at 500 is peak luxe spa. For editorial fashion → 'Playfair Display' at font-weight: 400. For fine jewelry → 'Bodoni Moda'. For contemporary wellness (Aesop, Glossier) → 'Recoleta' or 'Fraunces' at 500. Keep the italic emphasis <em> either way.
  • Change the CTA shape: the dark pill (border-radius: 999px) is quiet-luxury default. For a more editorial minimalist hero drop the background entirely and use border-bottom: 1px solid currentColor as a text-link CTA. For premium SaaS shift to border-radius: 8px with a subtle lift shadow.
  • For dark-mode inversion: swap the base to #1a1912, aurora stops to #3a5548, #5a3a35, #5a4a30, card background to rgba(30,28,20,0.55) with the same 20px blur, text to #faf6ed, and CTA to #b8956a gold that hovers to #faf6ed. Aurora over deep bone is the Apple Vision Pro night mode.
  • For Tailwind: relative overflow-hidden grid place-items-center bg-[#faf6ed] [contain:layout_paint] on section, bg-white/55 border border-white/85 rounded-3xl backdrop-blur-xl backdrop-saturate-150 shadow-[0_22px_60px_rgba(195,150,120,0.18)] on the card, font-serif font-medium text-5xl tracking-tight leading-[1.05] on h2.

Gotchas — read before shipping

  • The backdrop-filter: blur(20px) saturate(140%) is the whole effect but it's expensive on mid-tier Android and older iPhones. Test on real hardware (a Pixel 6a or iPhone 11 minimum) — if you see frame drops during the aurora rotation, either drop blur to 12px, drop the saturate, or set will-change: transform only on the aurora div and never on the card.
  • Firefox required layout.css.backdrop-filter.enabled for years — as of Firefox 103 it's default-on, but some corporate managed installs still ship it off. Ship a @supports not (backdrop-filter: blur(20px)) fallback with a solid rgba(255,255,255,0.85) card background so the card never becomes fully transparent.
  • The animation: hs-04-spin 30s linear infinite keeps the aurora in constant rotation — WCAG 2.3.3 (animation from interactions) and the more general vestibular-safety guidance both require respecting prefers-reduced-motion: reduce, which the demo does. Never remove the guard: 30s is slow enough to feel calm, but any continuous rotation is a hard trigger for vestibular disorders.
  • The text on the frosted card (#2a2818 deep bone on rgba(255,255,255,0.55)) computes to a contrast ratio of roughly 11:1 against the underlying pale bone base — safely WCAG AAA. But if you swap to a darker aurora base, the actual perceived contrast of text against the composited card can drop. Test with the aurora at every rotation position, not just the initial frame.
  • Cormorant Garamond at font-weight: 500 is a real weight in the font — but if you're loading from Google Fonts you need to explicitly request wght@500 or the browser falls back to synthesized weights that look off. For the italic <em> at font-weight: 600 you also need ital,wght@1,600.
  • In React with SSR (Next.js, Remix), the aurora div hydrates with the animation already in flight — which can cause a one-frame flash where the rotation snaps to zero and then jumps back. Wrap the aurora in useEffect(() => setMounted(true), []) and only apply the animation class after mount, or accept the flash and note it in your visual-regression baseline.

Techniques used in this demo

conic-gradient()MDN ↗filterMDN ↗backdrop-filterMDN ↗radial-gradient()MDN ↗@keyframesMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →