website_designs

Gradient Mesh Design Reference

Gradient Mesh is a contemporary design aesthetic built around complex, multi-point color gradients that flow organically across surfaces, creating rich, painterly fields of blended hues. Unlike simple linear or radial gradients that transition between two colors along a single axis, mesh gradients employ multiple color control points scattered across a two-dimensional plane, allowing colors to blend in every direction simultaneously. The result is a lush, almost liquid visual language reminiscent of aurora borealis, oil-on-water iridescence, or soft-focus watercolor washes. Popularized by brands like Stripe, Instagram, and Apple, and fueled by tools like Figma and dedicated mesh generators, this aesthetic has become a defining visual trend of the 2020s – conveying modernity, creativity, and premium quality. In web and UI design, Gradient Mesh translates to vibrant multi-hue backgrounds, softly glowing hero sections, translucent glassmorphic overlays atop color fields, and typography that either floats on these rich canvases or absorbs their colors through gradient text effects.

Visual Characteristics

Core Design Traits

Multi-point color blending – three or more colors merge across a surface from distinct control points, creating complex transitions impossible with linear gradients
Organic, flowing color fields – colors shift unpredictably across the canvas like liquid pigments, with no harsh lines or geometric boundaries
Soft-focus diffusion – edges between color zones are heavily blurred, creating a dreamy, atmospheric quality
Vibrant, saturated hues – bold purples, magentas, teals, oranges, and blues at high saturation, creating visual energy and warmth
Luminous quality – colors appear to glow from within, as if backlit, giving surfaces an ethereal radiance
Large-scale background treatment – mesh gradients typically span entire sections or viewports as immersive backdrops
Glassmorphism pairing – frosted-glass panels with backdrop blur layered over mesh gradient backgrounds for content readability
Noise and grain textures – subtle noise overlays added to smooth gradients, preventing color banding and adding tactile depth
Minimal decorative elements – the gradient itself is the decoration; additional ornamentation is kept sparse and clean
Fluid, asymmetric compositions – color placement follows organic rather than geometric logic, creating dynamic visual flow

Design Principles

Let the gradient be the hero – it replaces traditional imagery and illustration as the primary visual element
Use color strategically: each hue in the mesh should serve a purpose, guiding the eye or evoking a mood
Maintain contrast between the mesh background and foreground content – glassmorphism or dark overlays ensure readability
Keep surrounding UI elements clean and minimal so the gradient is not competing with busy layouts
Color transitions should feel effortless and natural, never forced or mechanical
Add subtle grain or noise texture to prevent banding artifacts in smooth color areas
Balance warm and cool hues within the mesh for visual harmony and depth
Use the brightest, most saturated points sparingly as focal anchors within the color field
Treat the mesh as a living surface – subtle animation or parallax shifts can enhance the organic quality
Design for emotional impact: mesh gradients should feel inviting, premium, and slightly otherworldly

Color Palette

Aurora Flow Palette

Color Name	Hex	Role / Usage
Electric Violet	`#7B2FFF`	Primary mesh anchor, hero gradient focal point
Hot Magenta	`#FF2D87`	Secondary mesh point, accent buttons, active states
Coral Flame	`#FF6B4A`	Warm mesh anchor, hover highlights, warm accents
Sunset Amber	`#FFAA33`	Warm gradient terminus, badges, notification dots
Vivid Teal	`#00D4AA`	Cool mesh anchor, success states, secondary CTAs
Ocean Blue	`#2E7CF6`	Cool gradient midpoint, link color, informational elements
Deep Indigo	`#1A0A4B`	Dark mesh edge, deep backgrounds, footer surfaces
Soft Lavender	`#C4B5FD`	Muted text on dark backgrounds, secondary labels
Blush Pink	`#FFB5C8`	Light mesh accent, soft highlights, decorative elements
Arctic White	`#F8F9FF`	Primary text on dark mesh, card backgrounds in light mode
Frosted Glass	`rgba(255,255,255,0.12)`	Glass panel surfaces, card overlays on mesh
Charcoal Base	`#0F0B1A`	Deepest background layer beneath mesh
Mist Gray	`#8B8DA3`	Secondary text, captions, placeholder content
Warm Cream	`#FFF5E6`	Light-mode background, soft contrast to vibrant mesh

CSS Custom Properties

:root {
  /* Mesh anchor colors */
  --mesh-violet: #7b2fff;
  --mesh-magenta: #ff2d87;
  --mesh-coral: #ff6b4a;
  --mesh-amber: #ffaa33;
  --mesh-teal: #00d4aa;
  --mesh-blue: #2e7cf6;

  /* Soft accents */
  --mesh-lavender: #c4b5fd;
  --mesh-blush: #ffb5c8;

  /* Backgrounds */
  --mesh-bg-deep: #0f0b1a;
  --mesh-bg-indigo: #1a0a4b;
  --mesh-bg-cream: #fff5e6;
  --mesh-bg-white: #f8f9ff;

  /* Glass */
  --mesh-glass: rgba(255, 255, 255, 0.12);
  --mesh-glass-border: rgba(255, 255, 255, 0.18);
  --mesh-glass-strong: rgba(255, 255, 255, 0.22);

  /* Text */
  --mesh-text-light: #f8f9ff;
  --mesh-text-muted: #8b8da3;
  --mesh-text-dark: #1a0a4b;

  /* Mesh gradient backgrounds */
  --mesh-gradient-aurora: radial-gradient(at 20% 30%, #7b2fff 0%, transparent 60%),
    radial-gradient(at 75% 20%, #ff2d87 0%, transparent 55%),
    radial-gradient(at 50% 80%, #00d4aa 0%, transparent 50%),
    radial-gradient(at 90% 70%, #ff6b4a 0%, transparent 55%),
    linear-gradient(135deg, #1a0a4b, #0f0b1a);

  --mesh-gradient-sunset: radial-gradient(at 30% 40%, #ff2d87 0%, transparent 55%),
    radial-gradient(at 70% 30%, #ff6b4a 0%, transparent 50%),
    radial-gradient(at 50% 70%, #ffaa33 0%, transparent 55%),
    radial-gradient(at 85% 80%, #7b2fff 0%, transparent 50%),
    linear-gradient(160deg, #1a0a4b, #0f0b1a);

  --mesh-gradient-ocean: radial-gradient(at 25% 25%, #2e7cf6 0%, transparent 55%),
    radial-gradient(at 70% 40%, #00d4aa 0%, transparent 50%),
    radial-gradient(at 40% 75%, #7b2fff 0%, transparent 55%),
    radial-gradient(at 90% 85%, #c4b5fd 0%, transparent 45%),
    linear-gradient(140deg, #0f0b1a, #1a0a4b);

  /* Shadows and glows */
  --mesh-shadow-soft: 0 8px 32px rgba(123, 47, 255, 0.15);
  --mesh-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.12);
  --mesh-glow-violet: 0 0 20px rgba(123, 47, 255, 0.35), 0 0 60px rgba(123, 47, 255, 0.1);
  --mesh-glow-magenta: 0 0 20px rgba(255, 45, 135, 0.35), 0 0 60px rgba(255, 45, 135, 0.1);
}

Typography

Typeface Characteristics

Gradient Mesh typography is:

Clean and modern – geometric or grotesque sans-serifs that complement rather than compete with vibrant backgrounds
Variable weight – light weights for elegant body text, bold weights for punchy headlines against busy color fields
Generous spacing – open letter-spacing and line-height that let the gradient breathe through and around the text
Gradient-filled display text – large headlines sometimes use background-clip: text to absorb the mesh colors into the letterforms themselves
High contrast on mesh – white or near-white text with subtle shadows to maintain readability over color-rich backgrounds
Rounded and friendly – slightly rounded terminals and soft geometry that echo the organic nature of the gradients

Recommended Web Fonts (Google Fonts)

Font	Style	Best For
Inter	Geometric, clean, variable	Body text, UI elements, versatile workhorse
Sora	Geometric, modern, friendly	Headlines, subheadings, brand text
Plus Jakarta Sans	Rounded geometric	Headlines, body text, warm modern feel
Outfit	Geometric, contemporary	Headings, labels, clean UI text
Space Grotesk	Geometric, slightly quirky	Headlines, tech-forward contexts
DM Sans	Clean, neutral geometric	Body text, form labels, UI elements
Manrope	Semi-rounded, modern	Subheadings, body text, accessible feel
Satoshi	Geometric grotesque	Headlines, brand text (self-hosted)
Poppins	Geometric, rounded	Friendly headlines, approachable UI
General Sans	Neutral geometric	Body text, editorial content (self-hosted)

Font Pairing Suggestions

Heading Font	Body Font	Character
Sora (700)	Inter (400)	Modern, professional, tech-forward
Plus Jakarta Sans (700)	DM Sans (400)	Warm, approachable, rounded harmony
Space Grotesk (600)	Inter (400)	Quirky headlines, clean body text
Outfit (700)	Manrope (400)	Contemporary, balanced, editorial
Poppins (600)	DM Sans (400)	Friendly, soft geometry throughout

Typography CSS Example

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: var(--mesh-text-light);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Display / Hero text with gradient fill */
.mesh-display {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  background: linear-gradient(135deg, var(--mesh-violet), var(--mesh-magenta), var(--mesh-coral));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Light text on mesh backgrounds */
.mesh-heading-light {
  font-family: 'Sora', sans-serif;
  color: var(--mesh-text-light);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Body text */
body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--mesh-text-light);
}

/* Labels and captions */
.mesh-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mesh-text-muted);
}

/* Subtle mono for code or data */
.mesh-mono {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

Layout Principles

Grid and Structure

Full-bleed mesh backgrounds – gradient fields span the entire viewport as immersive backdrops; no visible page edges
Centered containers with breathing room – content at 1000-1200px max-width, allowing the mesh gradient to show generously on sides
Glassmorphic content panels – frosted-glass cards and sections float above the mesh, creating layered depth
Asymmetric color placement – mesh control points are deliberately off-center, creating dynamic tension and visual flow
Generous white space – padding and margins are larger than typical to let gradient colors breathe and flow
Layered depth through blur – background mesh, mid-layer frosted panels, foreground content create a three-dimensional feel
Fluid full-width sections – alternating between mesh-background hero areas and solid-color content sections for rhythm

Section Organization

Navigation: Transparent or frosted-glass bar floating over the mesh, with clean text links and a minimal logo
Hero: Full-viewport mesh gradient background with large white or gradient-filled headline, brief description, and CTA
Features: Dark or neutral background with glassmorphic cards in a grid, each with a colored accent or icon
Content rows: Alternating mesh-background and solid-background sections for visual breathing room
Stats/Metrics: Large gradient-filled numbers on dark backgrounds, with clean sans-serif labels
CTA section: Vibrant mesh gradient backdrop with centered white headline and prominent button
Footer: Deep, dark background with muted text and subtle mesh gradient accent at top edge

Responsive Approach

Maintain mesh gradient backgrounds at all breakpoints – they scale naturally and remain beautiful
Reduce the number of visible radial gradient layers on mobile for performance if needed
Scale display text aggressively with clamp() to stay impactful on small screens
Stack glassmorphic cards vertically; preserve blur and transparency effects
On low-power devices, consider reducing blur radius or replacing backdrop-filter with solid semi-transparent backgrounds
Use CSS @supports to provide graceful fallbacks for older browsers lacking backdrop-filter

CSS / Design Techniques

Mesh Gradient Card Component

.mesh-card {
  background: var(--mesh-glass);
  border: 1px solid var(--mesh-glass-border);
  border-radius: 16px;
  padding: 32px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.mesh-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mesh-shadow-soft);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Colored top accent */
.mesh-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--mesh-violet), var(--mesh-magenta), var(--mesh-coral));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mesh-card:hover::before {
  opacity: 1;
}

/* Card grid layout */
.mesh-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

Mesh Gradient Button

.mesh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border: none;
  border-radius: 12px;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: linear-gradient(135deg, var(--mesh-violet), var(--mesh-magenta));
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.3s ease, filter 0.2s ease;
  text-decoration: none;
}

.mesh-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--mesh-glow-violet);
  filter: brightness(1.1);
}

.mesh-button:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* Ghost / outline variant on mesh backgrounds */
.mesh-button--ghost {
  background: transparent;
  color: var(--mesh-text-light);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mesh-button--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  filter: none;
}

/* Teal variant */
.mesh-button--teal {
  background: linear-gradient(135deg, var(--mesh-teal), var(--mesh-blue));
}

.mesh-button--teal:hover {
  box-shadow: 0 0 20px rgba(0, 212, 170, 0.35), 0 0 60px rgba(0, 212, 170, 0.1);
}

.mesh-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px;
  position: relative;
  z-index: 10;
}

.mesh-nav__logo {
  font-family: 'Sora', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mesh-text-light);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.mesh-nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mesh-nav__links a {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: rgba(248, 249, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mesh-nav__links a:hover {
  color: var(--mesh-text-light);
}

/* Frosted nav variant */
.mesh-nav--frosted {
  background: rgba(15, 11, 26, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 100%;
  padding: 16px 40px;
}

Hero Section with Mesh Background

.mesh-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 40px;
  overflow: hidden;
  background: var(--mesh-gradient-aurora);
  background-color: var(--mesh-bg-deep);
}

/* Noise texture overlay */
.mesh-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

.mesh-hero__content {
  position: relative;
  z-index: 5;
  max-width: 720px;
}

.mesh-hero__content h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  margin-bottom: 1.5rem;
  color: var(--mesh-text-light);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.mesh-hero__content p {
  font-size: 1.15rem;
  color: rgba(248, 249, 255, 0.75);
  margin-bottom: 2.5rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .mesh-hero {
    min-height: auto;
    padding: 80px 20px;
  }
}

Multi-Point Mesh Gradient Background

/* The core technique: layering multiple radial gradients
   at different positions to create a mesh effect */
.mesh-background {
  background:
    radial-gradient(at 15% 25%, #7b2fff 0%, transparent 55%),
    radial-gradient(at 70% 15%, #ff2d87 0%, transparent 50%),
    radial-gradient(at 85% 60%, #ff6b4a 0%, transparent 45%),
    radial-gradient(at 40% 80%, #00d4aa 0%, transparent 50%),
    radial-gradient(at 60% 50%, #2e7cf6 0%, transparent 40%);
  background-color: var(--mesh-bg-deep);
}

/* Animated mesh -- subtle color drift */
.mesh-background--animated {
  background-size: 200% 200%;
  animation: meshDrift 20s ease-in-out infinite alternate;
}

@keyframes meshDrift {
  0% { background-position: 0% 0%; }
  25% { background-position: 50% 20%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 80%; }
  100% { background-position: 0% 100%; }
}

Glassmorphic Panel on Mesh

.mesh-glass-panel {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 40px;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Light mode glass variant */
.mesh-glass-panel--light {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

/* @supports fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .mesh-glass-panel {
    background: rgba(15, 11, 26, 0.85);
  }
}

Noise Texture Overlay

/* SVG-based noise texture to add grain to smooth mesh gradients */
.mesh-noise {
  position: relative;
}

.mesh-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  mix-blend-mode: overlay;
}

Gradient Text Effect

.mesh-gradient-text {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    var(--mesh-violet) 0%,
    var(--mesh-magenta) 35%,
    var(--mesh-coral) 65%,
    var(--mesh-amber) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animated gradient text */
.mesh-gradient-text--animated {
  background-size: 200% 200%;
  animation: textShimmer 4s ease-in-out infinite alternate;
}

@keyframes textShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

Design Do’s and Don’ts

Do

Layer multiple radial-gradient() values at different positions to create complex, multi-point mesh effects
Use glassmorphism (backdrop-filter: blur) to float readable content panels above vivid gradient backgrounds
Add a subtle noise or grain texture overlay to prevent color banding in smooth gradient areas
Maintain generous padding and white space so the mesh colors have room to breathe and flow
Pair vibrant mesh backgrounds with clean, high-contrast white or near-white text
Use clamp() for display text to keep headlines impactful across all screen sizes
Limit the mesh to 3-5 color control points per composition – complexity should feel organic, not chaotic
Provide @supports fallbacks for backdrop-filter to ensure older browsers still get a usable experience
Use CSS custom properties for gradient colors so the palette is easy to theme and adjust
Consider subtle animation (background-position drift) to bring the mesh to life without distraction

Don’t

Overload the mesh with too many colors – more than 5-6 anchor points tends to become muddy and brownish
Place low-contrast text directly on busy gradient areas without a glass panel or text shadow for readability
Use harsh, geometric gradient shapes (hard-stop linear gradients) – the aesthetic demands soft, organic blending
Combine mesh gradients with busy patterns, heavy illustrations, or textured backgrounds that compete for attention
Apply mesh gradients to every section – alternate with solid-color areas for visual rhythm and rest
Use exclusively warm or exclusively cool colors – the best mesh gradients balance both temperature ranges
Forget performance: heavy backdrop-filter and large animated gradients can tax mobile GPUs
Mix too many typefaces – let 1-2 clean sans-serifs do the work and let the gradient provide the visual richness
Use dark text on dark areas of the mesh or light text on light areas – readability must always come first
Neglect the noise overlay – perfectly smooth digital gradients can look sterile and exhibit visible banding

Aesthetic	Relationship to Gradient Mesh
Glassmorphism	Natural companion; glass panels with backdrop-blur are the primary technique for overlaying content on mesh backgrounds
Aurora Design	A close sibling specifically inspired by the northern lights; aurora tends toward cooler greens, teals, and purples with horizontal banding
Vaporwave	Both use vivid color gradients, but Vaporwave is ironic and retro-nostalgic while Gradient Mesh is forward-looking and premium
Holographic	Shares the iridescent, multi-hue quality; Holographic specifically mimics light-diffracting foil with rainbow spectral shifts
Neomorphism	Both use soft visual treatments; Neomorphism uses subtle shadows on flat surfaces while Gradient Mesh uses rich color fields
Flat Design 2.0	Gradient Mesh emerged as flat design evolved to reintroduce depth and richness through color gradients rather than skeuomorphic textures
Brutalism	Polar opposite: Brutalism embraces raw, stark contrast and visible structure, while Gradient Mesh is soft, flowing, and polished
Material Design	Material uses subtle gradients for elevation and shadows; Gradient Mesh uses bold, artistic gradients as the primary visual language
Synthwave	Both employ vivid color gradients; Synthwave follows strict warm-to-cool sunset logic while Gradient Mesh is freeform and multi-directional

Quick-Start: Minimal Gradient Mesh Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gradient Mesh Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --mesh-violet: #7b2fff;
      --mesh-magenta: #ff2d87;
      --mesh-coral: #ff6b4a;
      --mesh-amber: #ffaa33;
      --mesh-teal: #00d4aa;
      --mesh-blue: #2e7cf6;
      --mesh-lavender: #c4b5fd;
      --mesh-blush: #ffb5c8;
      --mesh-bg-deep: #0f0b1a;
      --mesh-bg-indigo: #1a0a4b;
      --mesh-text-light: #f8f9ff;
      --mesh-text-muted: #8b8da3;
      --mesh-glass: rgba(255, 255, 255, 0.08);
      --mesh-glass-border: rgba(255, 255, 255, 0.12);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: var(--mesh-bg-deep);
      color: var(--mesh-text-light);
      font-family: 'Inter', sans-serif;
      font-size: 1rem;
      line-height: 1.7;
    }

    h1, h2, h3 {
      font-family: 'Sora', sans-serif;
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.01em;
    }

    /* Navigation */
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 40px;
      position: relative;
      z-index: 20;
    }

    nav a.logo {
      font-family: 'Sora', sans-serif;
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--mesh-text-light);
      text-decoration: none;
    }

    nav ul {
      display: flex;
      gap: 32px;
      list-style: none;
    }

    nav ul a {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 0.9rem;
      color: rgba(248, 249, 255, 0.6);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    nav ul a:hover {
      color: var(--mesh-text-light);
    }

    /* Hero Section */
    .hero {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 92vh;
      padding: 100px 40px;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 20% 30%, rgba(123, 47, 255, 0.7) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 20%, rgba(255, 45, 135, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(0, 212, 170, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 65%, rgba(255, 107, 74, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 35% 55%, rgba(46, 124, 246, 0.3) 0%, transparent 45%);
      background-color: var(--mesh-bg-deep);
    }

    /* Noise overlay */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      opacity: 0.6;
      pointer-events: none;
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 5;
      max-width: 700px;
    }

    .hero h1 {
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      margin-bottom: 1.5rem;
      color: var(--mesh-text-light);
      text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
      letter-spacing: -0.02em;
    }

    .hero p {
      font-size: 1.1rem;
      color: rgba(248, 249, 255, 0.72);
      margin-bottom: 2.5rem;
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
    }

    .btn {
      display: inline-block;
      padding: 14px 36px;
      border: none;
      border-radius: 12px;
      font-family: 'Sora', sans-serif;
      font-weight: 600;
      font-size: 0.9rem;
      color: #ffffff;
      background: linear-gradient(135deg, var(--mesh-violet), var(--mesh-magenta));
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.3s ease, filter 0.2s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 20px rgba(123, 47, 255, 0.4), 0 0 60px rgba(123, 47, 255, 0.1);
      filter: brightness(1.1);
    }

    .btn--ghost {
      background: transparent;
      border: 1.5px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      margin-left: 12px;
    }

    .btn--ghost:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.5);
      box-shadow: none;
      filter: none;
    }

    /* Features Section */
    .features {
      padding: 100px 0;
      background: var(--mesh-bg-deep);
    }

    .features h2 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 16px;
      background: linear-gradient(135deg, var(--mesh-violet), var(--mesh-magenta), var(--mesh-coral));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .features .subtitle {
      text-align: center;
      color: var(--mesh-text-muted);
      margin-bottom: 56px;
      font-size: 1.05rem;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .feature {
      background: var(--mesh-glass);
      border: 1px solid var(--mesh-glass-border);
      border-radius: 16px;
      padding: 32px;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .feature:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 32px rgba(123, 47, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.22);
    }

    .feature-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 20px;
    }

    .feature-icon--violet {
      background: linear-gradient(135deg, rgba(123, 47, 255, 0.2), rgba(255, 45, 135, 0.2));
    }

    .feature-icon--teal {
      background: linear-gradient(135deg, rgba(0, 212, 170, 0.2), rgba(46, 124, 246, 0.2));
    }

    .feature-icon--coral {
      background: linear-gradient(135deg, rgba(255, 107, 74, 0.2), rgba(255, 170, 51, 0.2));
    }

    .feature h3 {
      font-size: 1.1rem;
      margin-bottom: 10px;
    }

    .feature p {
      color: var(--mesh-text-muted);
      font-size: 0.92rem;
      line-height: 1.65;
    }

    /* Showcase Section with Mesh Background */
    .showcase {
      position: relative;
      padding: 100px 40px;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 30% 40%, rgba(255, 45, 135, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(255, 107, 74, 0.4) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 75%, rgba(255, 170, 51, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(123, 47, 255, 0.4) 0%, transparent 45%);
      background-color: var(--mesh-bg-deep);
    }

    .showcase::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      opacity: 0.6;
      pointer-events: none;
      z-index: 1;
    }

    .showcase-content {
      position: relative;
      z-index: 5;
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .showcase-text h2 {
      font-size: 2.2rem;
      color: var(--mesh-text-light);
      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
      margin-bottom: 1rem;
    }

    .showcase-text p {
      color: rgba(248, 249, 255, 0.72);
      font-size: 1.05rem;
      margin-bottom: 2rem;
    }

    .showcase-panel {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 20px;
      padding: 40px;
      backdrop-filter: blur(24px) saturate(1.2);
      -webkit-backdrop-filter: blur(24px) saturate(1.2);
    }

    .stat-row {
      display: flex;
      justify-content: space-between;
      text-align: center;
      gap: 24px;
    }

    .stat {
      flex: 1;
    }

    .stat-number {
      font-family: 'Sora', sans-serif;
      font-size: 2.2rem;
      font-weight: 700;
      background: linear-gradient(135deg, var(--mesh-violet), var(--mesh-magenta));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.1;
      margin-bottom: 6px;
    }

    .stat-label {
      font-size: 0.8rem;
      color: var(--mesh-text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    /* CTA Section */
    .cta {
      text-align: center;
      padding: 100px 40px;
      background: var(--mesh-bg-deep);
    }

    .cta h2 {
      font-size: 2.2rem;
      margin-bottom: 1rem;
      background: linear-gradient(135deg, var(--mesh-teal), var(--mesh-blue), var(--mesh-violet));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .cta p {
      color: var(--mesh-text-muted);
      font-size: 1.05rem;
      max-width: 480px;
      margin: 0 auto 2rem;
    }

    /* Divider */
    .divider {
      border: none;
      height: 1px;
      max-width: 1200px;
      margin: 0 auto;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(123, 47, 255, 0.3) 20%,
        rgba(255, 45, 135, 0.3) 50%,
        rgba(0, 212, 170, 0.3) 80%,
        transparent 100%
      );
    }

    /* Footer */
    footer {
      background: #080510;
      text-align: center;
      padding: 32px 40px;
      color: var(--mesh-text-muted);
      font-size: 0.85rem;
    }

    footer a {
      color: var(--mesh-lavender);
      text-decoration: none;
    }

    footer a:hover {
      color: var(--mesh-text-light);
    }

    /* Responsive */
    @media (max-width: 768px) {
      nav { padding: 16px 20px; }
      nav ul { gap: 20px; }
      .hero { min-height: auto; padding: 80px 20px; }
      .features { padding: 60px 0; }
      .features-grid { padding: 0 20px; }
      .showcase { padding: 60px 20px; }
      .showcase-content { grid-template-columns: 1fr; gap: 32px; }
      .stat-row { flex-direction: column; gap: 16px; }
      .cta { padding: 60px 20px; }
    }
  </style>
</head>
<body>
  <nav>
    <a href="#" class="logo">Lumina</a>
    <ul>
      <li><a href="#">Canvas</a></li>
      <li><a href="#">Palette</a></li>
      <li><a href="#">Studio</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>

  <section class="hero">
    <div class="hero-content">
      <h1>Color in Motion</h1>
      <p>Where light bends and hues dissolve into one another. A living canvas of vibrant gradients that shift, breathe, and flow.</p>
      <a href="#" class="btn">Explore</a>
      <a href="#" class="btn btn--ghost">Learn More</a>
    </div>
  </section>

  <hr class="divider">

  <section class="features">
    <h2>Built for Brilliance</h2>
    <p class="subtitle">Every pixel blends with purpose. Every transition tells a story.</p>
    <div class="features-grid">
      <div class="feature">
        <div class="feature-icon feature-icon--violet">&#9670;</div>
        <h3>Fluid Color Fields</h3>
        <p>Multi-point gradients that flow organically across the canvas, creating depth and dimension through pure color interaction.</p>
      </div>
      <div class="feature">
        <div class="feature-icon feature-icon--teal">&#9656;</div>
        <h3>Glass Layers</h3>
        <p>Frosted panels float above vivid backgrounds, letting color wash through while keeping content crisp and readable.</p>
      </div>
      <div class="feature">
        <div class="feature-icon feature-icon--coral">&#9675;</div>
        <h3>Living Surfaces</h3>
        <p>Subtle animation brings the mesh to life. Colors drift and shift like light moving across water, always evolving.</p>
      </div>
    </div>
  </section>

  <section class="showcase">
    <div class="showcase-content">
      <div class="showcase-text">
        <h2>Designed to Captivate</h2>
        <p>Our mesh gradient approach creates immersive visual experiences that feel premium, modern, and alive. Each composition balances warmth and coolness for maximum impact.</p>
        <a href="#" class="btn">Get Started</a>
      </div>
      <div class="showcase-panel">
        <div class="stat-row">
          <div class="stat">
            <div class="stat-number">5M+</div>
            <div class="stat-label">Color Points</div>
          </div>
          <div class="stat">
            <div class="stat-number">360°</div>
            <div class="stat-label">Hue Range</div>
          </div>
          <div class="stat">
            <div class="stat-number">∞</div>
            <div class="stat-label">Variations</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <hr class="divider">

  <section class="cta">
    <h2>Start Creating</h2>
    <p>Step into a world where color has no boundaries. Build interfaces that feel alive with light and movement.</p>
    <a href="#" class="btn">Launch Studio</a>
  </section>

  <footer>
    <p>Lumina Studio &mdash; Crafted with flowing color and quiet precision</p>
  </footer>
</body>
</html>

This site is open source. Improve this page.