Agence WagnerAgence Wagner
FRENDEELS
Retour aux designs
GradientsColoréOrganique
Aperçu

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
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>
← Retour aux designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Tous droits réservés.

Designs issus de chrislemke/website_designs, sous licence MIT.