PickCodeInspect the element, find background-image (or background) in the Styles or Computed tab, and copy the linear-gradient() or radial-gradient() value. If you see url(...) instead, the gradient is an image and you need to download the file or rebuild it.
Copy it with DevTools
- Right-click the element and choose Inspect.
- In Styles, look for
backgroundorbackground-image. If it is not on the selected node, select its parent; gradients often sit on a wrapper or a::beforelayer. - Copy the full value. Computed shows the same gradient with colors converted to
rgb(). - Paste it into your CSS, or keep it as a Tailwind arbitrary value.
.hero {
background-image: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}In Tailwind
Simple two or three stop gradients map to Tailwind's gradient utilities. Anything else can stay as an arbitrary value:
<div class="bg-linear-135 from-indigo-500 to-pink-500"></div>
<div class="bg-[linear-gradient(135deg,#6366f1_0%,#ec4899_100%)]"></div>The first line uses Tailwind v4 names; in v3 the angle classes were bg-gradient-to-br and similar. Gradient text also needs bg-clip-text text-transparent on the text element.
The faster way
PickCode copies the element's background-image as written in computed styles, gradient included, as an arbitrary Tailwind value or plain CSS. It does not yet carry over background-clip: text, so add bg-clip-text text-transparent yourself for gradient text. If the gradient is an image, the assets tab downloads it.
Full walkthrough: Copy CSS in DevTools
Questions
Why can't I find the gradient in DevTools?
It may be on a parent, on a ::before or ::after layer, or drawn in a canvas, SVG or image. Check those in that order.
Can I copy an animated gradient?
The colors, yes. The animation lives in @keyframes, which you need to copy from the stylesheet separately.
How do I make a gradient from colors I picked?
List the colors in order inside linear-gradient() with an angle, such as 135deg for top left to bottom right.