How to convert CSS gradients to Photoshop GRD

Photoshop stores gradient presets in its own binary format, a .grd file, not as CSS. If you designed a gradient for the web and want to use the exact same colors and stops inside Photoshop, you need to convert it first. Here is how, and what the converter is actually doing under the hood.

Why you can't just paste CSS into Photoshop

A CSS gradient like linear-gradient(90deg, #7c5cff 0%, #22d3ee 100%) is just a string. Photoshop's Gradient panel expects a structured preset file: a name, a set of color stops with positions from 0 to 4096, and a matching set of opacity stops. There is no built-in import for raw CSS, so the usual workaround is recreating the gradient by hand, stop by stop, which is slow and easy to get slightly wrong on position or color.

What to convert

You do not need a full linear-gradient() string. Any of these work as input:

• A CSS gradient function, linear or radial
• A plain list of hex codes, like #7c5cff, #22d3ee, #f472b6
• RGB values, like rgb(124,92,255), rgb(34,211,238)
• Named HTML colors, like cornflowerblue, tomato, gold
• BBCode color tags, the kind used in forum signatures

The converter parses whichever format you paste, extracts the colors in order, and spaces them evenly unless your input already specifies positions (as percentages in a CSS gradient).

Steps

1. Open the CSS to GRD tool and paste your gradient, hex list, RGB values, or BBCode. 2. Check the live preview against what you expect. If a color looks off, check for a typo in the hex code. 3. Confirm the detected stops in order, then name the gradient. The name becomes the label Photoshop shows in the Gradient panel. 4. Download the .grd file.

Loading it into Photoshop

In Photoshop, open the Gradient tool options, click the gradient preview to open the Gradient Editor, then use the small gear icon (or right-click the swatch list) and choose Load Gradients. Point it at the downloaded .grd file and your gradient appears at the bottom of the preset list, ready to use on any layer or fill.

A note on accuracy

Because Photoshop stores stop positions on a 0 to 4096 scale rather than 0 to 100, a naive conversion can round positions slightly. A correct converter maps percentages proportionally onto that range so the stops land in the same relative places as your original CSS, and keeps full opacity across the ramp unless your source specified transparency. That is the difference between a gradient that looks right and one that is subtly off when you zoom in.

If you only have a Photoshop gradient and want to go the other way, extracting its colors back out as CSS, see the companion guide on reading a .grd file. Otherwise, convert your gradient now with the CSS to GRD converter.