FigpeaGet CSS out of a PSD
Open the PSD, click the layer you are building, and copy its CSS. You get the values a front-end developer actually needs — font family, size, weight, line height, letter spacing, colour, corner radius, borders, shadows, and the layer's dimensions — without opening Photoshop or waiting for a hand-off.
Everything you need to inspect PSD files
Copy CSS from any layer
Select a layer and copy its generated CSS straight from the inspector's code panel.
Typography values in full
Font family, size, weight, line height, style, alignment, letter spacing, and colour.
Colour, radius, borders, shadows
Fills and CSS gradients, per-corner border radius, border style, plus every enabled drop and inner shadow.
Free, and no account
Inspecting layers and copying CSS cost nothing; the packaged spec-bundle and token exports are Pro.
Read on your device
The PSD is parsed in your browser and is never uploaded.
Frequently asked questions
How do I get CSS from a PSD without Photoshop?
Open the PSD in Figpea, select a layer on the canvas or in the layer tree, and look at the inspector's code panel. It shows the generated CSS for that layer with a copy button next to it.
Which CSS properties does it produce?
For text: font-family, font-size, font-weight, line-height, font-style, text-align, letter-spacing, text-decoration, and colour. For any layer: width and height, opacity, rotation, blend mode, border colour, width and style, corner radius — including per-corner radii — plus drop shadows, inner shadows, blur, and CSS gradients.
Is the output ready-made component code?
No, and it is worth being clear about that. What you get is a declaration block for one layer, positioned absolutely, with the design's real values in it. It is the fastest reliable way to lift accurate values into your own markup — not a replacement for writing the layout.
Does it cost anything?
No. Opening a file, inspecting layers, and copying CSS are free and need no account. The packaged developer-handoff exports — a self-contained spec bundle and a design-tokens file — are Pro features.
Are multiple shadows on one layer handled?
Yes. Every enabled drop shadow and inner shadow on the layer is emitted, in the order the file stores them, rather than only the first one.
Is my PSD uploaded to generate the CSS?
No. The file is read and the CSS is generated on your own device, in your browser. Nothing is uploaded.