webdevpuneet.com

Related Snippets

83 in Layouts category
52–57 of 60

Browser Window Mockup

Tablet Mockup

Phone Mockup

Email Inbox

Wave Divider

Split Screen Layout

Browser Window Mockup — Free CSS Browser Frame Snippet

Browser Window Mockup · Layouts · Plain HTML, CSS & JS · Live preview

CategoryLayouts
TagsKeyboard NavigationCSS AnimationCSS Grid

Copy & paste

Source Code

<div class="bw-stage">
  <div class="bw-window" id="bwWindow">
    <div class="bw-bar">
      <div class="bw-lights"><span class="r"></span><span class="y"></span><span class="g"></span></div>
      <div class="bw-tabs">
        <div class="bw-tab active"><span class="bw-fav"></span>Dashboard<i class="bw-x">&times;</i></div>
        <div class="bw-tab">Docs<i class="bw-x">&times;</i></div>
        <span class="bw-add">+</span>
      </div>
    </div>
    <div class="bw-toolbar">
      <button class="bw-nav" aria-label="Back">&#8249;</button>
      <button class="bw-nav" aria-label="Forward">&#8250;</button>
      <button class="bw-nav" id="bwReload" aria-label="Reload">&#10227;</button>
      <div class="bw-url"><span class="bw-lock"></span><input id="bwUrl" value="https://acme.app/dashboard" spellcheck="false"></div>
      <button class="bw-nav" aria-label="Menu">&#8942;</button>
    </div>
    <div class="bw-content" id="bwContent">
      <div class="bw-hero">
        <span class="bw-eyebrow">Acme Analytics</span>
        <h1>Ship faster with insight</h1>
        <p>Real-time product metrics in one clean place.</p>
        <div class="bw-row"><button class="bw-cta">Get started</button><button class="bw-ghost">Live demo</button></div>
      </div>
      <div class="bw-grid"><span></span><span></span><span></span></div>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Pure-CSS chrome
Traffic lights, tabs, and toolbar with no images.
Realistic tabs
Top-rounded tabs that merge into the page.
Editable address bar
A real input with a CSS padlock icon.
Reload animation
Spinning icon plus a dim-and-reset refresh.
Enter to navigate
Pressing Enter in the URL re-triggers the reload.
Tab switching
Active highlight moves, close button guarded.
Content slot
Swap in any page or screenshot.
No dependency
Pure HTML/CSS/JS for mockups and docs.

About this UI Snippet

Browser Window Mockup — CSS Browser Chrome Wrapper

Screenshot of the Browser Window Mockup snippet rendered live

A browser window mockup wraps a screenshot or live page in realistic browser chrome — traffic-light buttons, tabs, an address bar — for landing pages, documentation, and product shots. This one is pure HTML and CSS with a few interactive touches (a spinning reload, tab switching, an editable URL), in vanilla JavaScript with no dependency, so you can drop any content inside and present it as if it were running in a browser.

The chrome, built from scratch

The window is a rounded card with three stacked regions: a tab strip with the macOS-style traffic lights (three colored circles), a toolbar with navigation buttons and the address bar, and the content area. The tabs use border-radius only on the top corners and a darker inactive background so the active tab appears to merge into the page below — the classic browser-tab look achieved with plain CSS.

A convincing address bar

The URL field is a real <input> inside a pill, preceded by a CSS-drawn padlock: a small bordered box with a ::before pseudo-element forming the shackle, in green to signal HTTPS. The input is editable, and pressing Enter blurs it and triggers the reload animation, mimicking a navigation. It's a believable detail that most static mockups fake with an image.

Reload that feels real

Clicking reload restarts a bwSpin keyframe on the icon (using the void offsetWidth reflow trick so it replays every click) and adds a .loading class that briefly dims the content and resets its scroll — a lightweight imitation of a page refresh. Nothing actually navigates, but the motion sells it.

Cosmetic tabs

Clicking a tab moves the .active class, and the close (×) and add (+) controls are present for realism; tab clicks ignore the close button via stopPropagation. You can wire these to real routes if you embed the mockup in an interactive demo.

Reusing it as a wrapper

Replace the .bw-content markup with your own page or a screenshot and the frame becomes a reusable container. Set the value of the address input to your URL, and keep the chrome as a component so any hero section or dashboard can be shown "in a browser" on a marketing page or in docs.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA browser window renders with tabs, a toolbar, and a sample page.
  2. 2
    Edit the URLType in the address bar and press Enter to trigger a reload.
  3. 3
    Click reloadThe icon spins and the page briefly dims like a refresh.
  4. 4
    Switch tabsClicking a tab moves the active highlight.
  5. 5
    Drop in your contentReplace the content area with your page or screenshot.
  6. 6
    Reuse as a wrapperKeep the chrome as a component with a content slot.

Real-world uses

Common Use Cases

Landing page screenshots
Frame a hero section as a live browser with traffic-light buttons, top-rounded tabs that merge into the page and an editable address bar with a padlock icon.
Documentation context
Show a UI in context beside a code block, using pure CSS chrome with no images so it stays sharp and themeable.
Product dashboard presentation
Present a dashboard layout inside a browser window, with a reload icon that spins and the content dimming then resetting on refresh.
Responsive demos
Pair with a phone mockup to show desktop and mobile versions side by side, or put it in a bento grid showcase.
Hero section framing
Wrap a hero section screenshot for marketing pages, and learn how tabs, address bars and padlock icons are built from plain CSS.
Related: Code Snippet Tabs
See the Code Snippet Tabs for a related layouts pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

No, it's pure CSS. The traffic-light buttons are three colored circles, the tabs are top-rounded boxes that merge into the page, the address bar is a styled input with a CSS padlock pseudo-element, and the toolbar buttons are HTML characters. Because nothing is an image, it stays crisp and you can recolor or resize any part.

It's a real, editable input. Typing and pressing Enter blurs it and triggers the same reload animation as the reload button, simulating a navigation. It doesn't load a new page — it's a presentational mockup — but you can wire the Enter handler to real routing if you embed it in an interactive demo.

Clicking reload restarts a CSS spin keyframe on the icon using the void offsetWidth reflow trick so it replays on every click, and adds a loading class that briefly lowers the content's opacity and resets its scroll position. The combination reads as a page refresh without any real network activity.

Replace the markup inside .bw-content with your page or an <img> screenshot, and set the address input's value to your URL. The chrome is independent of the content, so your page just fills the content area, which scrolls if it's taller than the frame. Keep the window as a reusable wrapper component.

Make the window a component with a content slot (children, slot, or ng-content) and props for the URL and tab list. The reload spin and loading dim are class toggles you can drive from state. In Tailwind, build the chrome with flex rows, rounded-t utilities for tabs, and small inline SVGs or characters for the controls.