CSS gradient inspector

See every color stop in any element's gradient laid out on a bar, hover a stop for its exact color and position, and copy the gradient CSS from any website.

What it shows

A CSS gradient packs a direction and any number of color stops into one long function. When the selected element has a gradient background, the side panel adds a Gradients section, titled with the count, for example 2 Gradients. For each gradient you get:

• A color stop bar. The gradient drawn left to right with a pin for every stop at its position.
• Exact stop values. Hover a pin to see its color and position, such as #6366F1 @ 40%.
• The CSS. The complete background-image value for that gradient, with a copy button.

Layered backgrounds with several gradients are split apart, so each one gets its own bar and its own code block.

How to copy a gradient from a website

1. Open the page with the gradient.
2. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
3. Click the element with the gradient background. Hero sections, buttons and cards are the usual places. If the section does not appear, the gradient may be on a parent: press Alt + Shift + Up to step up.
4. In the side panel's Element tab, find the Gradients section.
5. Hover the pins to read the stops, then click the copy button to copy the background-image declaration.

What it understands

• All gradient types. linear-gradient(), radial-gradient() and conic-gradient(), plus their repeating- versions.
• Directions and angles. Keywords like to top right are read as angles, and a linear gradient with no direction is treated as the default 180deg.
• Implied stop positions. When stops have no position, Screen Ruler fills them in the way the browser does: the first at 0%, the last at 100% and the ones between spread evenly. The bar shows where each stop really lands.
• Conic stops in degrees. Stops placed in deg are mapped onto the bar as a share of the full turn.
• Modern color spaces. Stops written in oklch(), oklab(), lch(), lab(), hwb() or color() are converted so they read the same as any other color. Stop colors in the tooltip follow the format you picked in the Colors section.

The values come from computed styles, so gradients built from custom properties show up with the variables already resolved.

Limits

• Background gradients only. Gradients in border-image or mask-image are not listed. Text with a gradient fill counts when it uses the usual background-clip: text technique, since the gradient lives in the background.
• A bar, not a replica. Every gradient is laid out as a straight left-to-right bar so the stops are easy to compare. Radial and conic shapes are not redrawn, but the copied CSS keeps the full original value.
• Images are not gradients. A gradient baked into a PNG or SVG file is an image. Use the asset extractor to download it.

When it is useful

• Borrowing a color treatment. Copy the exact gradient from a hero or button you like instead of guessing it with a color picker.
• Building a palette. Read the individual stop colors and add them to your own palette. The color palette tool collects a page's colors in one place.
• Design QA. Compare stop colors and positions with the values in the design file, without reading a long gradient string by eye.
• Debugging banding or harsh transitions. See exactly where stops sit and spot two stops crowded too close together.

Inspect Gradients is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

How do I copy a CSS gradient from a website?

Start Screen Ruler, click the element with the gradient and open the Gradients section in the side panel. Click the copy button under the gradient to copy its background-image declaration.

Can I see the gradient in DevTools instead?

DevTools shows the gradient as one long value in the Styles pane, which is fine for short gradients. Screen Ruler lays the stops out on a bar with the exact color and position of each one on hover, which is easier to read when a gradient has many stops or implied positions.

Does it work with radial and conic gradients?

Yes. Linear, radial and conic gradients and their repeating versions are all read. The stop bar shows the stops in a straight line, and the copied CSS keeps the original shape and position.

Why are the colors different from the ones in the stylesheet?

The values come from the browser's computed styles. Variables are resolved, named colors become color values and modern color spaces are converted, so the colors may be written differently from the source while looking the same.