Pro Calculators and Guides
How to Make a Screenshot Look Professional With a Gradient and Window Frame
Put a screenshot on a gradient background with padding, rounded corners and an optional window bar. Ideal for blog posts, docs and social media.
Saizul Amin15 Oct 2026 · Updated 17 Oct 2026 · 1 min read
A raw screenshot pasted into a blog post looks flat. A little padding, a soft gradient and a window frame make it look intentional and more shareable.
Quick answer
Choose a screenshot, pick a gradient background, adjust the padding and corner radius, keep or remove the window bar with its three dots, and download the image.
What each control does
- Gradient: choose a colour pair that suits your brand.
- Padding: space around the screenshot; 40 to 80 px looks balanced.
- Corner radius: 8 to 16 px for a modern look.
- Window bar: adds the three-dot header that makes it look like a real window.
- Shadow: gives depth.
Steps
- Open the tool and add a screenshot.
- Choose background and padding.
- Toggle the window bar.
- Download the image.
Design tips
- Crop the screenshot to what matters before you start.
- Hide private data (emails, tokens) with Blur or Pixelate first.
- Use soft gradients; harsh colours distract from the content.
- Keep consistent padding and colours across a documentation set.
- Export at 2× size for crisp text on high-resolution screens.
Where it works well
Product updates, tutorials, README files, tweets, LinkedIn posts and presentation slides.
