Padding, shadow, corner radius: 3 small tweaks that elevate any screenshot
Three sliders, half a minute, dramatically better screenshots. The exact values that turn raw output into a shippable product asset.
Most screenshots look bad for the same three reasons — and you can fix all of them in under a minute. No design background, no Figma, no clever tooling. Just three knobs, in this order: padding, shadow, corner radius. Get them right and the same raw image suddenly belongs on a landing page instead of in a bug report.
1. Padding: stop bleeding to the edge
A raw screenshot ends where the UI ends. That is fine for a bug report and quietly terrible for anything that ends up in a feed — the eye has no resting place, the corners feel cramped, and platform previewers (X, LinkedIn, Slack) crop straight into the content.
Add room around the subject. Not symmetrical white-space treatment from Word, but actual padding measured in pixels. Defaults that almost always work:
- Single component (a button, a toast, an empty state): ~100 px on every side.
- Full app window (browser or Mac frame): ~80 px.
- Mobile shot: ~50 px — the bezel already carries weight.
Easy heuristic: the subject should occupy roughly two-thirds of the canvas. Under that and it looks lost; over that and the padding stops doing its job.
2. Shadow: tell the eye it has weight
Without a shadow, your screenshot is a sticker. With one, it is an object resting on a surface. That shift is psychological, and it happens whether or not the viewer consciously notices.
The shadow that works almost everywhere:
- Color — dark, semi-transparent (10–20 % opacity).
- Offset — ~20 px down, 0–10 px to one side.
- Blur — generous, 40–60 px.
Hard, jet-black, fully opaque shadows belong in PowerPoint 2007. On dark backgrounds, drop the shadow entirely or swap it for a soft glow — a dark shadow on a dark canvas just looks dirty.
3. Corner radius: round the edges, match the frame
Sharp 0-px corners feel like CAD output. Rounded corners feel like shipped product. The number that almost always reads right: 12–20 px for a no-frame screenshot. Inside a browser or Mac frame, match the corner radius of the frame itself — mismatched radii are the single biggest tell that a screenshot has been mocked-up.
Two pitfalls to avoid:
- Over-rounding — past ~28 px the shot starts to look like a UI playground component instead of a product.
- Mixed radii — don’t round three corners and leave one sharp. Don’t let the screenshot have a different radius than its frame. Consistency is the whole trick.
Why these three, in this order
Padding fixes composition — where the eye lands. Shadow fixes depth — whether the image feels like an object or a sticker. Corner radius fixes finish — the difference between “raw output” and “designed asset.” Skip any one and the screenshot still reads as unfinished, regardless of how good the other two are.
You can layer plenty of nice extras on top later — frames, gradients, day badges, a soft 3D tilt for hero shots. But none of them rescue a screenshot that ignored the basics. Get the three knobs right and almost everything else becomes optional.
The 30-second workflow
- Pad until the subject takes up roughly 70 % of the canvas.
- Add a soft, slightly-down shadow (10–20 % opacity, 40–60 px blur).
- Round the corners to 12–20 px, or match the frame.
Three sliders, half a minute. The same raw screenshot suddenly belongs in a deck, a tweet, or a Product Hunt gallery — without touching any design tool more complicated than a pair of input fields.