Create stunning gradients with OKLCH interpolation, interactive stop editing, mesh gradients, and export to CSS, Tailwind v4, SVG, and more. Press Space to randomize.
Comparison
OKLCH avoids muddy gray midpoints between saturated colors.
Color Vision Simulation
Ensure text on the gradient has at least 4.5:1 contrast for WCAG AA.
background: linear-gradient(135deg in oklch, #4F46E5 0%, #7C3AED 50%, #06B6D4 100%);
.animated-gradient {
background: linear-gradient(135deg in oklch, #4F46E5 0%, #7C3AED 50%, #06B6D4 100%);
background-size: 200% 200%;
animation: gradientShift 10s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}Colors transition along a straight line defined by an angle. Used for headers, buttons, backgrounds, and hero sections.
Colors radiate outward from a center point as a circle or ellipse. Ideal for spotlight effects, badges, and focused backgrounds.
Colors rotate around a center point like a color wheel. Perfect for charts, progress indicators, and decorative patterns.
Multiple color nodes blend organically across a 2D plane. Creates modern, fluid backgrounds similar to those in Apple and Stripe designs.
Traditional sRGB interpolation often produces muddy, desaturated midpoints when blending between vibrant colors. OKLCH (a perceptually uniform color space) maintains consistent lightness and chroma throughout the gradient, resulting in smoother, more natural transitions. Modern browsers support in oklch directly in CSS gradient functions.
sRGB interpolates colors in a gamma-encoded space that is not perceptually uniform, often producing dark gray midpoints between saturated colors. OKLCH uses perceptually uniform lightness and chroma channels, resulting in vibrant, even transitions without unwanted desaturation.
Mesh gradients are created by stacking multiple radial-gradient layers with different origins, colors, and radii. Using CSS background-blend-mode, these layers blend together to produce organic, multi-directional color flows without requiring WebGL or canvas.
CSS (with interpolation hints), Tailwind v4 arbitrary values, SCSS variables, CSS custom properties, SVG markup, JSON gradient definitions, W3C Design Tokens (DTCG format), and PNG images rendered via Canvas API.
Yes. Click the Share button to encode your current gradient into the URL hash. Anyone with the link will see the exact same gradient. The URL is also automatically copied to your clipboard.