How to Take a Website Screenshot PNG From a URL or From Raw HTML
A page you built, a landing page for a case study, an email design that needs sign-off: sooner or later each has to become a picture. This is a website screenshot PNG tool with two ways in: paste a link and capture the page at an exact device viewport with a clean window frame painted in, or paste HTML and CSS and get a sharp, transparent image back. It is a free website screenshot online with no signup and no watermark, and this guide covers what each mode does, what it does not, and which to reach for.
1. What a Website Screenshot PNG Gives You
A website screenshot PNG is a fixed picture of a page saved in the format defined by the W3C Portable Network Graphics specification. PNG matters for two reasons. It is lossless, so the thin lines and small type of most web pages come through without the smudging a JPG adds around edges. And it carries an alpha channel, so an image can have a genuinely transparent background.
That makes a lossless PNG website capture the right choice for portfolios, slide decks, documentation and bug reports. When you need a smaller file for a chat message, the website JPG screenshot tool is the same capture with a different output. URL to PNG here is the sharp, unaltered version.
2. How to Screenshot a Website as PNG (Step-by-Step)
This is how to screenshot a website PNG without an account, an email step or a trial. Leave the toggle on Capture Live URL and:
Paste the address
Type or paste the page URL. If you leave off https:// it is added for you, and an address that is not a valid URL is refused with a clear message.
Pick a viewport and the frame
Choose a device preset, then decide whether you want the clean window frame painted above the page. It is on by default.
Capture and download
Press Capture Lossless PNG. A result card shows the filename, pixel dimensions and file size with a preview, and Download PNG saves it.
The file is named after the domain and the preset, so example.com at the desktop preset arrives as example_com_1920x1080.png. That is a website screenshot no signup from start to finish.
3. Viewport Presets: 1920x1080, 1366x768, 768x1024 and 390x844
Captures usually look wrong because they were taken at whatever size the person’s own screen happened to be. A website screenshot generator with named presets fixes that: everyone captures at the same width.
Desktop 1080p — 1920x1080
The answer to how to screenshot a website at 1920x1080 when your own monitor is a different size: the full-HD layout most designs are signed off against.
Laptop HD — 1366x768
A website screenshot 1366x768 shows the width many laptops still use, where cramped navigation and overflowing hero text appear first.
iPad Tablet — 768x1024
An iPad 768x1024 website screenshot is the classic portrait tablet width, where most breakpoints flip from columns to a stacked layout.
Mobile iPhone — 390x844
A website screenshot 390x844 iPhone viewport capture is the logical width of recent iPhones, and how to screenshot a website in mobile view without a phone.
Two honest notes. The fifth button, labelled Custom Size, is a fixed 1280x800 preset rather than inputs you can type into. And the mobile preset narrows the viewport width; it does not pretend to be a phone, so a site that picks its layout from the device rather than the width may still serve its desktop version.
4. The Clean Window Frame: A Mockup in the Same Click
A raw capture of your own screen shows your tabs, bookmarks bar and extension icons. That is the “screenshot shows my bookmarks bar and tabs” problem, and the usual fix is two-step: capture, then hand it to a second tool to have chrome drawn around it.
Here it is one checkbox. With Add Clean Browser Window Frame ticked, a website screenshot with browser frame comes out with a dark 42-pixel header above the page: three traffic-light dots, a rounded address bar, and the page’s own URL beside a padlock. It is the screenshot website with mac window frame PNG look that case studies and pitch decks use, without the second tool.
The frame is a fixed design: no choice of style, colour, padding or backdrop. Untick the box and you get the bare page. It belongs to URL mode only; HTML sandbox captures come out unframed, because a component would look odd inside a window.
5. The HTML Sandbox: Convert HTML to PNG Online
Switch to Custom HTML Sandbox and the address field becomes a code box. Paste HTML and CSS, press capture, and you get an image of exactly that markup. This is how to convert HTML to PNG online and how to render an HTML snippet to an image when you want a picture of a component, a card or a pricing table rather than a whole live site.
Transparent by default
Anything you do not give a background stays transparent: HTML to PNG with a transparent background, ready to drop onto a slide without a white rectangle around it.
Sized by content, sharpened by scale
Width comes from the preset, capped at 1280; height comes from the markup itself. Render Resolution at 1x, 2x or 3x multiplies both, so a 2x Retina screenshot of HTML is one setting away.
The sandbox is where a marketer takes a screenshot of an HTML email template to PNG for approval. Images can be inlined as data URIs with the Base64 encoder so the snippet is self-contained.
Three things to know. Script tags in pasted markup do not run, so a snippet that builds itself on load captures empty. Images hosted on another site may come out blank unless that host permits embedding. And a few newer CSS effects, backdrop blur among them, are not reproduced.
7. Limits Worth Knowing Before You Start
- Above the fold only. A URL capture is the viewport you chose, cropped to that height. It is not a full-page scroll.
- Public pages only. Anything behind a login or a paywall, or a work-in-progress build that has not been published, cannot be captured from its URL. If you have the markup, the sandbox is the way through.
- Cookie banners stay. If you are searching “screenshot website cookie banner in the way”, the honest answer is that this tool cannot dismiss them. Crop the capture afterwards with the image cropper, or paste the page’s markup into the sandbox if it is yours.
- No delay, no element targeting, no batch. One URL, one capture. There is no timer, no selector, and no list of addresses to run overnight.
- PNG out, nothing else. For a document rather than an image, see save web as PDF. A finished PNG can be converted later with the image converter.
8. Why Cortexis Is the Best Free Website Screenshot Generator
Two inputs, one tool
Capture a live URL or render pasted HTML from the same page. HTML-to-image is not a separate product.
Frame baked in, same click
The clean window frame is painted into the PNG as part of the capture, not by a second mockup tool afterwards.
Website screenshot no watermark
Nothing is stamped across the corner and no tier removes it. The image you download is the image.
Named device viewports
Four real sizes — 1920x1080, 1366x768, 768x1024 and 390x844 — so a whole team captures at the same width.
Honest about its limits
Above-the-fold URL captures, sandbox-only Retina scaling and a fixed frame are written down here, not discovered after the download.
Nothing kept
Cortexis does not store your captures or pasted markup. Nothing is retained after your session and nothing is ever used for training.
It sits alongside a wider set of free image and document tools on the same terms, so you can compress it, resize it or crop it without paying for any of it.
9. Frequently Asked Questions (FAQ)
How do I take a website screenshot PNG for free without signing up?
Paste the address into the Capture Live URL field above, pick a viewport preset, choose whether you want the window frame, and press Capture Lossless PNG. No account, no email step, no watermark, and free every time rather than for the first few captures.
Can I take a screenshot of a whole website, top to bottom?
Not with this tool. URL captures are cropped to the height of the preset you choose, so you get the top of the page as it fits that viewport. For a record of a page as a document, save web as PDF is the neighbouring option.
Why does my website screenshot look blurry?
Because it was captured at standard density and is viewed on a high-density display. In the HTML sandbox, set Render Resolution to 2x or 3x for two or three times the pixels. A live URL comes back at standard density whatever you select there, so choose the largest preset that suits the layout.
How do I screenshot a website in mobile view without a phone?
Choose the Mobile iPhone preset for 390x844, or iPad Tablet for 768x1024. Sites that pick their layout from the viewport width will show their phone or tablet layout; sites that decide from the device itself may still show the desktop version, because the preset changes the width only.
The cookie banner is covering the page. Can the tool remove it?
No. Consent popups are captured as they appear and there is no option to dismiss them. Crop the capture afterwards with the image cropper, or, if the page is yours, paste its markup into the HTML sandbox and leave the banner out.
Can I get a transparent background on a website screenshot?
In the HTML sandbox, yes: any area of your markup without a background is saved as transparent PNG. Live URL captures are always opaque, because a real page has a background of its own.
Need a different output from the same page? The website JPG screenshot tool gives a smaller file for chat and email, save web as PDF is the one for a document, and WebP to PNG handles captures you were given in that format. To learn how the pages you capture are built, our free full-stack web course starts with HTML, CSS and the breakpoints these presets are designed around.