Linear gradient

Smooth color transitions in any direction using oklch().

Widely Supported

colorno-js

Quick implementation

/* Horizontal gradient */
.gradient-horizontal {
  background: linear-gradient(to right,
    oklch(0.55 0.25 265),
    oklch(0.72 0.19 330)
  );
}

/* Diagonal gradient */
.gradient-diagonal {
  background: linear-gradient(135deg,
    oklch(0.65 0.22 145),
    oklch(0.55 0.2 200)
  );
}

/* Multi-stop gradient */
.gradient-multi {
  background: linear-gradient(to right,
    oklch(0.5 0.25 290),
    oklch(0.65 0.2 265),
    oklch(0.75 0.15 200)
  );
}

Prompt this to your LLM

Includes role, constraints, and edge cases to handle.

You are a senior frontend engineer styling gradient backgrounds.

Goal: Create linear gradient backgrounds using CSS with oklch() colors.

Technical constraints:
- Use linear-gradient() with oklch() color values exclusively.
- Show at least three variants: horizontal (to right), diagonal (135deg), and vertical (to bottom).
- Include a multi-stop gradient with 3+ color stops.
- oklch values should be in the format oklch(lightness chroma hue).
- Use color interpolation in oklch space for smoother transitions: linear-gradient(in oklch, ...).

Edge cases:
- Gradients with complementary hues (opposite on the color wheel) can produce muddy midpoints — use "in oklch" interpolation to travel through vivid intermediate colors.
- Ensure gradients work as fallbacks: provide a solid background-color before the gradient.
- Test on both light and dark backgrounds for contrast.

Why this matters in 2026

Linear gradients are the most-used gradient type in CSS, powering everything from hero backgrounds to button states. Using oklch() instead of hex or hsl produces visually smoother transitions because oklch interpolates through perceptually uniform color space. The muddy gray midpoint you get with hex gradients between complementary colors simply doesn't happen in oklch.

The logic

linear-gradient(to right, color1, color2) creates a horizontal gradient from left to right. You can use degree values (135deg) for diagonal gradients or keywords like to bottom right. Additional color stops are added as comma-separated values and distributed evenly by default. You can control stop positions explicitly: oklch(0.5 0.2 265) 30% places that color at 30% of the gradient line.

Accessibility & performance

Gradients are rendered by the GPU as a background layer — they're essentially free in terms of performance. No layout or paint cost beyond the initial render. For accessibility, never place text on a gradient without checking contrast at both the lightest and darkest points. If you're using a gradient behind text, test with WCAG contrast tools at multiple positions along the gradient.