Photoshop GRD to CSS: extract gradients

A Photoshop .grd file can hold dozens or even hundreds of gradient presets, but there is no easy way to see their actual color values from inside Photoshop itself. If you inherited a gradient pack, downloaded a preset file, or just want to reuse a Photoshop gradient on a website, you need to pull the color stops back out as CSS. Here is how that works.

What is actually inside a .grd file

A .grd file is a binary preset file, not plain text. It stores a list of gradient objects, and each one carries a name, an interpolation setting, a list of color stops (each with a position and a color), and a separate list of opacity stops. Positions are stored on a scale of 0 to 4096 rather than the 0 to 100 you would use in CSS, which is why you cannot just open the file in a text editor and read the numbers off directly.

Parsing it in the browser

The GRD parser reads that binary structure directly: it walks the file, finds every gradient object, and converts each one into color stops you can actually use, expressed as CSS, hex, and RGB. Positions get rescaled from the 0 to 4096 range down to percentages, so what you see matches how the gradient would render.

Because parsing happens entirely in your browser, the file itself is never uploaded anywhere. That matters if the pack came from a paid asset bundle or a client project you cannot redistribute; only the numbers pass through your own machine.

Steps

1. Open the GRD parser tool. 2. Drop your .grd file onto it, or use the file picker. 3. Every gradient inside the file appears in a list, each with its own live preview. 4. For the one you want, copy the generated CSS, hex list, or RGB values, or export it as an SVG.

What to do with multi-gradient files

Preset packs often bundle many gradients into a single .grd. The parser lists them all rather than making you guess which one you need, so you can scan the previews and pick the right one instead of opening Photoshop and clicking through the Gradient panel one swatch at a time.

Common gotchas

If a gradient looks flat or a single solid color once converted, check whether it actually has more than one color stop. Photoshop lets you save single-color "gradients" for use as fills, and those will convert correctly but will not look like a ramp because there is nothing to ramp between.

If the colors look right but the direction is reversed compared to what you remember in Photoshop, remember that CSS gradients and Photoshop's angle dial do not share the same zero point by convention, so you may need to flip the angle once you paste the CSS into a real layout.

Need to go the other direction, turning a CSS gradient or a hex list into a .grd file for Photoshop? Use the CSS to GRD converter. To read a Photoshop gradient file right now, open the GRD parser.