Hero Gradient — Radial Glow, Grid Overlay, and a Subtle Light Mode Tint

The homepage hero in Astro Rocket uses layered visual effects that respond to both the active colour theme and the current light/dark mode. Dark mode gets a radial glow from a deep brand colour at the top that fades into the page background, combined with a dot-grid texture overlay. Light mode gets a very subtle, almost-invisible brand tint at the very top — just enough to anchor the hero without overpowering the content.

This is not two separate implementations. It is one CSS class with two rules, plus the showGrid prop on the Hero component.

The CSS

A single utility class named .hero-dark-gradient lives in global.css:

.hero-dark-gradient {
  background: radial-gradient(
    ellipse 80% 40% at 50% 0%,
    color-mix(in oklch, var(--color-brand-400), transparent 94%),
    transparent
  );
}

.dark .hero-dark-gradient {
  background: radial-gradient(
    ellipse 100% 60% at 50% 0%,
    var(--color-brand-800) 0%,
    var(--color-background) 100%
  );
}

In light mode, the gradient is an ellipse centred at the very top of the hero (50% 0%), 80% wide and 40% tall. It starts with brand-400 mixed 94% transparent — so only 6% of the brand colour bleeds through — and fades to fully transparent. The result is barely perceptible: a whisper of brand colour at the top that gives the section just a hint of identity without adding visual weight.

In dark mode, the ellipse expands to full width (100%) and 60% height. It starts from brand-800 at the centre of the ellipse and fades to var(--color-background) at the edges. brand-800 is the darkest step in the brand scale — rich and saturated but never harsh — and fading to the actual background colour (rather than to black) means the gradient blends seamlessly into the rest of the page regardless of which theme is active.

Why brand-800 and not brand-600 or brand-500

var(--color-brand-800) is three steps darker than the primary brand-500 accent. On a dark background, lighter brand shades produce a vivid, high-contrast glow that can overpower the content sitting on top. brand-800 is saturated enough to read clearly as a branded background without competing with the heading and buttons in front of it. It creates atmosphere rather than spectacle — the right balance for a hero that is meant to introduce content, not steal the show.

How dark mode is detected

Dark mode in Astro Rocket is class-based, not media-query-based. The custom variant is defined in global.css:

@custom-variant dark (&:where(.dark, .dark *));

This means the .dark class is toggled on the root element based on the user’s explicit theme choice during the current session. The .dark .hero-dark-gradient rule activates the moment that class is present — no JavaScript is needed for the gradient itself. See Why Astro Rocket Uses sessionStorage for Dark Mode for how that choice is stored and restored between page loads.

Applying it

The class is applied once, directly on the Hero component in src/pages/index.astro:

<Hero layout="centered" size="xl" class="hero-dark-gradient" showScrollIndicator showGrid>
  ...
</Hero>

The showGrid prop adds a dot-grid overlay that is hidden dark:block — it only appears in dark mode, layering a subtle texture over the radial glow. The grid uses a radial mask so it fades out toward the edges, keeping the centre of the hero clean. Together with the gradient, it gives the dark mode hero a depth and texture that the light mode deliberately avoids.

The gradient follows the brand colour

var(--color-brand-800) is not a fixed hex value. It is a CSS custom property that updates when the user picks a different colour theme — blue, purple, orange, or any of the twelve options in the header colour picker. The gradient adapts automatically. Switch from indigo to orange and the glow at the top of the hero becomes a deep orange. No extra code needed; the custom property does the work. See How Astro Rocket’s Design System Works for a full walkthrough of every colour token and how they are structured.

Light mode: a subtle brand anchor

Unlike the previous version of this hero — which had no gradient in light mode at all — the current light mode applies a very faint brand tint. At 6% opacity it is not intended to be noticed as a gradient; it is there to give the hero a slight sense of place and brand identity without the heavy feel that a stronger gradient would create on a light background. The plain white background of the rest of the page flows into it seamlessly.

Other hero features

The gradient and grid are two of several layers that make up the homepage hero:

• Hero Scroll Indicator — two bouncing chevrons that appear after the hero animation and disappear the moment you start scrolling.