Quick implementation
.gradient-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.5rem;
background: linear-gradient(135deg, oklch(0.72 0.19 265), oklch(0.62 0.19 276));
color: white;
font-weight: 600;
font-size: 0.95rem;
border: none;
border-radius: var(--radius);
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0.5rem 1.5rem oklch(0.72 0.19 265 / 0.2);
}
.gradient-button:hover {
background: linear-gradient(135deg, oklch(0.78 0.19 265), oklch(0.68 0.19 276));
box-shadow: 0 0.75rem 2rem oklch(0.72 0.19 265 / 0.3);
transform: translateY(-2px);
}
.gradient-button:active {
transform: translateY(0);
box-shadow: 0 0.25rem 0.5rem oklch(0.72 0.19 265 / 0.2);
}
.gradient-button:focus-visible {
outline: 2px solid oklch(0.72 0.19 265);
outline-offset: 2px;
}
.gradient-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer specializing in modern color design and button interactions.
Your goal: Design a gradient button component that uses smooth color transitions to create visual richness and attract user attention—using oklch() color space for perceptually uniform gradients.
Technical constraints:
1. Use linear-gradient with oklch() colors (no hex or rgb)
2. Gradient angle should be 135deg (diagonal for visual interest)
3. Gradient should shift between two hues to create dynamic color flow
4. Use oklch() for perceptual uniformity: same lightness at both ends
5. Hover state must lighten the gradient (increase lightness by 5–10%)
6. Shadow should match gradient color with 0.2–0.3 opacity
7. On hover, shadow should deepen and button should lift (translateY)
8. Must maintain 4.5:1 contrast ratio for white text
9. Focus state must use visible outline with high contrast
Vanilla implementation:
- Define base gradient with oklch() stop colors
- Create ::before pseudo-element with lighter hover gradient
- Use opacity or transition to swap gradients smoothly
- Add drop-shadow or box-shadow for depth
- Implement active state with reduced shadow and translateY reset
React implementation:
- Create Button component with gradient prop for color pairs
- Use styled-components or CSS Modules for dynamic gradient generation
- Support custom color variants (blue, purple, pink, etc.)
- Create gradient utility function: createGradient(startHue, endHue)
- Support isLoading state with animated shimmer effect
Edge cases to handle:
1. Gradient on small buttons: may appear flat; use shadow for depth
2. Gradient performance: avoid animating gradient stops, use opacity instead
3. Print media: gradients may render poorly; provide fallback solid color
4. High contrast mode: gradient may be invisible; add border as fallback
5. Different viewport widths: gradient direction may be too subtle on mobileWhy this matters in 2026
Gradient buttons are the visual equivalent of professional polish. They're more memorable and distinctive than flat solid buttons, making CTAs jump off the page. In competitive SaaS landscapes, this visual distinctiveness translates to higher conversion rates and better user recall.
In 2026, oklch() color space is finally widely supported and preferred over rgb/hex for gradients. OKLCH gradients are perceptually uniform, meaning color transitions look natural and smooth to human eyes. This is superior to rgb gradients, which have muddy midtones. Gradient buttons with oklch() and thoughtful shadow layering signal modern, sophisticated design.
The logic
The gradient button uses a 135-degree linear gradient that flows from top-left to bottom-right, creating a dynamic diagonal sweep. Both color stops use oklch() with the same lightness (0.72 and 0.62) but different hues (265 and 276), creating a smooth purple-to-blue transition that feels natural.
On hover, the gradient lightens by increasing the lightness values (0.78 and 0.68), creating a brighter, more energetic appearance. The button also lifts via transform: translateY(-2px), paired with a deeper box-shadow, reinforcing the hovering effect. The shadow itself uses the gradient's primary color with 0.2–0.3 opacity, ensuring visual cohesion. The active state removes the lift and reduces shadow to simulate pressing.
Accessibility & performance
Accessibility: Gradient buttons must maintain sufficient contrast between white text and the gradient background. The gradient's lightest point should have at least 4.5:1 contrast with white. Always include a focus-visible outline in a contrasting color. The outline should use 2px width and 2px offset for clarity. Test gradients in high-contrast mode to ensure they remain visible.
Performance: Animating gradients directly is expensive. Instead, use opacity or box-shadow transitions to create hover effects. The current implementation only changes the gradient values (not animated), so there's zero performance cost. The 0.3s transition applies to all properties smoothly. Avoid using filter: brightness() or hue-rotate() on gradient buttons, which trigger expensive GPU operations.