Gradients are everywhere in modern UI design — hero backgrounds, CTA buttons, card overlays, icon backgrounds. Picking the right gradient means understanding both the colors involved and the mechanics of how browsers blend them. Whether you're extracting a gradient from a design you admire or building a fresh gradient system from your brand palette, having a systematic approach makes the process faster and the results more consistent.
Two Ways to Extract Gradient Colors
Method 1: DevTools CSS inspection (most accurate)
When you need the exact gradient values — including all color stops, positions, and angles — DevTools gives you the complete CSS declaration:
- Right-click the gradient element on the page
- Select "Inspect" to open DevTools
- In the Styles panel, find the property containing
linear-gradient,radial-gradient, orconic-gradient - Copy the full value — it will look like:
linear-gradient(135deg, #667eea 0%, #764ba2 100%) - This gives you the exact angle, all color stops, and their positions
DevTools also shows a small color swatch next to each color value in the CSS panel. Click any swatch to get the color in HEX, RGB, or HSL, and to see a live preview of gradient changes if you edit the values.
Method 2: Color Pick Pro pixel sampling (for visual extraction)
When DevTools access is limited, or when you want to sample gradient colors from an image or screenshot rather than a live page, Color Pick Pro's eyedropper provides direct pixel sampling:
- Open the page or image with the gradient you want to sample
- Activate Color Pick Pro's eyedropper
- Sample the leftmost (or topmost) point of the gradient — this gives you the start color
- Sample the rightmost (or bottommost) point — this gives you the end color
- For multi-stop gradients, sample at roughly 25%, 50%, and 75% positions to find intermediate stops
- Note the HEX values for each stop, then estimate the angle from the visual direction
This method gives you close approximations rather than exact declared values. The sampled pixel colors represent the rendered output at that point, which may differ slightly from the declared gradient values if there are color blending effects or overlaid elements.
Sample Any Color From Any Gradient
Color Pick Pro's pixel-accurate eyedropper captures any color stop from any gradient on any website.
Add Color Pick Pro FreeCSS Gradient Types
| Type | CSS Property | Direction Control | Best Used For |
|---|---|---|---|
| Linear | linear-gradient() |
Angle in degrees | Backgrounds, buttons, headers, hero sections |
| Radial | radial-gradient() |
Shape and center position | Spotlight effects, glows, depth effects |
| Conic | conic-gradient() |
Starting angle and position | Pie charts, color wheels, decorative elements |
| Repeating linear | repeating-linear-gradient() |
Same as linear | Striped patterns, progress bars, loading states |
Linear gradient syntax
/* Angle + two stops */ background: linear-gradient(135deg, #667eea, #764ba2); /* Named direction */ background: linear-gradient(to right, #667eea, #764ba2); /* Multi-stop with positions */ background: linear-gradient(135deg, #667eea 0%, #5563de 50%, #764ba2 100%); /* With transparency */ background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.7));
Radial gradient syntax
/* Circular gradient from center */ background: radial-gradient(circle, #667eea, #764ba2); /* Ellipse gradient at specific position */ background: radial-gradient(ellipse at 30% 40%, #667eea, transparent); /* Button glow effect */ background: radial-gradient(circle at center, #a78bfa, #7c3aed);
Common Gradient Angles in Modern UI Design
Angle choice affects the perceived energy of a gradient. Understanding common conventions helps you match a design's aesthetic intentionally:
| Angle | Direction | Perceived Feel | Common Use |
|---|---|---|---|
| 0deg / 360deg | Bottom to top | Rising, vertical | Data visualizations |
| 45deg | Diagonal (BL to TR) | Energetic, sporty | Fitness, gaming brands |
| 90deg | Left to right | Clean, progressive | Buttons, progress bars |
| 135deg | Diagonal (TL to BR) | Modern, dynamic | SaaS hero backgrounds, CTAs |
| 180deg | Top to bottom | Stable, traditional | Overlay fades, hero images |
The Muddy Midpoint Problem
One of the most common gradient quality issues: when two complementary colors are blended with CSS's default RGB interpolation, the midpoint often looks desaturated — gray, brown, or murky. This happens because complementary colors (like blue #3b82f6 and orange #f97316) are on opposite sides of the RGB color cube, and the arithmetic midpoint passes through near-gray territory.
Solution 1: oklch color space interpolation (modern browsers)
/* Default RGB interpolation (may produce muddy midpoint) */ background: linear-gradient(135deg, #3b82f6, #f97316); /* oklch interpolation (follows perceptual path, preserves saturation) */ background: linear-gradient(in oklch, #3b82f6, #f97316);
The in oklch syntax tells the browser to interpolate colors along the perceptual oklch color space, which follows paths of constant chroma (saturation). This avoids the gray midpoint for most color combinations. Support: Chrome 111+, Firefox 113+, Safari 16.2+.
Solution 2: Add a saturated intermediate stop
/* Add a vivid midpoint color to skip the muddy zone */ background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #f97316 100%); /* For blue-to-red: go through purple, not gray */ background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 50%, #dc2626 100%);
Choosing the intermediate color intentionally — a purple between blue and red, a yellow between green and orange — creates a vibrant, saturated path through the color wheel. The manual midpoint approach works in all browsers.
Solution 3: Use analogous colors
Colors adjacent on the color wheel blend naturally without desaturation. Blue to teal, red to orange, green to yellow — these combinations share enough hue that the intermediate values remain vivid. When the gradient feels muddy with your current color pair, try shifting one endpoint to a closer hue.
Build Gradients from Real Colors You Find Online
Sample gradient start and end colors with Color Pick Pro, then build your CSS gradient.
Install Color Pick Pro FreeBuilding a Gradient System
Rather than picking gradient colors ad hoc for each element, a systematic gradient library produces more consistent results across a design system.
Deriving gradients from your brand palette
If your brand has a primary color (#3b82f6 blue) and a secondary color (#8b5cf6 purple), the natural gradient combines them: linear-gradient(135deg, #3b82f6, #8b5cf6). This is exactly how most SaaS product brands work — the gradient IS the visual identity, derived directly from the palette.
From one primary color, you can derive multiple gradient variants:
- Brand gradient: Primary to secondary (most prominent use)
- Light variant: Lighter shade to primary (for subtle backgrounds)
- Dark variant: Primary to a darker shade (for dark mode or overlays)
- Accent gradient: Primary to a high-contrast accent (for CTA buttons)
:root {
/* Brand colors */
--color-primary: #3b82f6;
--color-primary-dark: #1d4ed8;
--color-primary-light: #93c5fd;
--color-secondary: #8b5cf6;
/* Gradient system */
--gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
--gradient-hero: linear-gradient(135deg, var(--color-primary-dark), var(--color-secondary));
--gradient-subtle: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
--gradient-overlay: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
--gradient-cta: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
}
Gradient opacity and layering
Overlaying a gradient on an image or solid color requires transparency. The most common pattern is a dark overlay gradient on photography:
/* Fade to dark at the bottom (text overlay on hero photo) */
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
/* Tinted gradient overlay on photo */
background: linear-gradient(135deg, rgba(59,130,246,0.7), rgba(139,92,246,0.7));
/* Layered: photo + gradient */
background:
linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.6)),
url('photo.jpg') center/cover;
Frequently Asked Questions
How do I find the colors in a CSS gradient on a website?
Use browser DevTools: right-click the element, Inspect, find the CSS rule containing linear-gradient or radial-gradient. The complete declaration shows all color stops and the angle. Alternatively, use Color Pick Pro to sample the gradient visually at multiple points across its width to capture the start, midpoint, and end colors. DevTools gives exact declared values; the color picker gives rendered pixel values.
What is the difference between linear-gradient, radial-gradient, and conic-gradient?
Linear-gradient blends colors along a straight line at a specified angle. Radial-gradient emanates from a center point outward in a circular or elliptical shape — used for glows and depth effects. Conic-gradient rotates colors around a center point like clock hands — used for pie charts and decorative effects. Linear-gradient is the most common in UI design by far.
How do I reproduce a gradient I found on another website?
Inspect the element in DevTools and copy the CSS gradient declaration directly — this is the most accurate method and takes 10 seconds. If that's not available, use Color Pick Pro to sample the start and end colors, then estimate the angle visually. Build: linear-gradient(Xdeg, #startColor, #endColor). Most gradients are 2-stop linear gradients with angles between 90deg and 180deg.
How do I create a gradient that doesn't have a muddy gray midpoint?
Use linear-gradient(in oklch, color1, color2) for modern browsers — oklch interpolation follows perceptual paths that preserve saturation. For broader browser support, add a manually chosen saturated intermediate color stop (for blue-to-orange, add a vivid purple at 50%). Alternatively, choose analogous rather than complementary colors — adjacent hues blend naturally without desaturation.
What gradient angles are used most commonly in modern UI design?
135deg is the most popular in modern SaaS and tech design — it creates a diagonal from top-left to bottom-right that feels dynamic. 90deg (horizontal) is clean and common for buttons. 180deg (top-to-bottom) is traditional and used for image overlays. When building something that should feel current, 135deg is a safe default.
More Free Chrome Tools by Peak Productivity
