Shadows and gradients
Each shadow and gradient layer drawn out with its numbers, to copy as CSS.
These sections appear in the Element tab only when they have something to say about the selected element. An element with nothing to warn about, no shadow and no gradient shows none of them.
Select an element with a box shadow, a text shadow or a gradient background, and a Shadows and gradients section appears in the Element tab.
- Each shadow layer is drawn on a plain tile, so you see what it does, with its numbers beside it: offset (x and y), blur, spread and colour, and whether it is inset.
- Each gradient layer is drawn on a bar, with its type (linear, radial or conic), its direction or shape, and its stops with their colours and positions.
- A copy button on every layer copies it as CSS.
The values are the browser's resolved ones, in px and rgb.
Questions
Which effects are drawn out?
Box shadows, text shadows and gradient backgrounds: linear, radial and conic.
Can I copy a single layer?
Yes. Every layer has a copy button that copies it as CSS.