What the finder reports
| Field | What it tells you |
|---|---|
| Kind | Linear, radial or conic, and whether it repeats |
| Uses | How many elements and pseudo-elements share the same gradient |
| Fills text | Whether the gradient colors text instead of a background |
| Stop colors | Each color in order, as a hex code |
| CSS | The gradient as a ready-to-paste background declaration, and all of them as CSS variables |
It reads computed styles, so a gradient that is built from CSS variables or set by script is shown as the browser resolved it.
How to use it
- Paste a page with a gradient you like. Hero sections, buttons and headline text are the usual places.
- Check the swatch. It is drawn from the real CSS, so it matches what the page shows.
- Copy the CSS for one gradient, or copy all of them as
--gradient-1style variables. - Pair it with the palette. The color palette tool ranks every color on the page, which shows how the gradient fits the brand.
Linear, radial and conic in one minute
- Linear blends along an angle, such as
linear-gradient(135deg, a, b). It is the default choice for backgrounds and buttons. - Radial spreads from a point, such as a soft glow behind a hero image.
- Conic sweeps around a point. It makes color wheels, pie charts and shiny metallic edges.
- Layered backgrounds stack several gradients, often a soft radial glow over a linear base. The finder lists each layer separately.
Tips for using what you find
- Soft, low-contrast gradients look expensive; high-contrast ones look loud. Check the stop colors for the difference.
- Text with a gradient fill needs enough contrast at every point along the gradient.
- Gradients between very different hues can look muddy in the middle. Add a stop or change the interpolation color space in CSS to fix it.
Other free tools
FAQ
How do I get the gradient from a website?
Paste the address above. Enrichr loads the page in a real browser and reads the computed background of every element, so it lists the gradients that really apply, including ones set by JavaScript. Click Copy to take the CSS.
Why do the colors show as rgb values?
Browsers resolve every color to rgb or rgba when they compute a style. The finder shows the resolved gradient so it matches what was drawn, and lists each stop as a hex code you can copy.
Does it find gradients on text?
Yes. A gradient used with background-clip: text is flagged as filling text.
Does it find gradients in SVGs or canvas?
No. It reads CSS gradients only. A gradient defined inside an SVG, drawn in a canvas or baked into an image is not a CSS gradient and is not listed.
Why is a gradient I can see missing?
It may be a hover or scroll state that was not active, an image, a video, or a gradient on a different page of the site. Try the exact page, and note it lists the gradients that apply at the moment of the scan.
Can I use a site's gradient?
A color blend itself is not something anyone owns, but a distinctive overall look can be tied to a brand. Use the CSS as a starting point and make it your own.
What are the three kinds?
Linear gradients blend along a line, radial gradients spread out from a point, and conic gradients sweep around a point like a color wheel. Repeating versions tile the pattern.
Is it free?
Yes. Your first fresh lookup of any site is free without an account.