Design Aesthetic Reference

Gradient Mesh

Multi-point color blending, organic flowing gradients, and aurora-like transitions. Where light bends, hues dissolve, and surfaces come alive with iridescent luminance.

Scroll

Type Specimens

Clean, geometric sans-serifs that complement rather than compete with vibrant gradient backgrounds.

Display / Sora 800
Color in Motion
Heading Hierarchy / Sora

Heading Three

Heading Four

Heading Five
Body Text / Inter 400
Gradient Mesh design employs multiple color control points scattered across a two-dimensional plane, allowing hues to blend in every direction simultaneously. The result is a lush, painterly surface reminiscent of aurora borealis or soft-focus watercolor washes.
Aurora
Violet / Magenta / Coral
Ocean
Blue / Teal / Lavender
Sunset
Coral / Amber / Magenta

Aurora Flow

Vibrant mesh anchor colors balanced between warm and cool hues for maximum depth and visual harmony.

Electric Violet
#7B2FFF
Hot Magenta
#FF2D87
Coral Flame
#FF6B4A
Sunset Amber
#FFAA33
Vivid Teal
#00D4AA
Ocean Blue
#2E7CF6
Soft Lavender
#C4B5FD
Blush Pink
#FFB5C8
Deep Indigo
#1A0A4B
Charcoal Base
#0F0B1A
Aurora Flow
Sunset Bloom
Ocean Depth

UI Building Blocks

Glassmorphic cards, gradient stats, and layered panels that float above vivid color fields.

Mesh Technique

Multi-Point Blending

Layer multiple radial gradients at different control points to create complex color transitions impossible with linear gradients.

Learn more
Glass Layer

Frosted Overlays

Backdrop-blur panels float above gradient backgrounds, letting vivid colors wash through while keeping content sharp and readable.

Learn more
Texture

Noise Grain Overlay

Subtle SVG-based noise textures prevent color banding in smooth gradient areas, adding tactile depth and organic warmth.

Learn more
5+
Color Points
360°
Hue Spectrum
24px
Blur Radius
0.05
Noise Opacity

Standard Canvas

Essential mesh gradient tools for clean, modern interfaces with up to three color anchor points.

Free / forever
  • 3 mesh anchor colors
  • Glassmorphic card components
  • Noise texture overlay
  • Responsive grid layouts
Get Started

Living Color Surfaces

Aurora borealis, iridescent films, vivid color pools, and animated mesh fields brought to life with pure CSS.

Aurora Borealis
Cool teal, blue, and violet bands shift horizontally like northern lights dancing across the sky.
Iridescent Surface
A full-spectrum rainbow sweep that mimics light diffracting through a holographic film.
Color Pools
Vivid color circles float and breathe like luminous pigment drops merging on a dark surface.
Mesh Grid Visualization
Exposed control points and wireframe grid reveal the underlying structure of multi-point color blending.
Animated Gradient Flows
Floating Color Orbs

Step Into the Color Field

Build interfaces where light bends, hues dissolve, and surfaces glow with organic luminance. The mesh awaits.