UI Components Easy

Browser Mockup

Realistic browser window frame with address bar, tab, navigation buttons, and inner content area for screenshots or demos.

Open in Lab

css

Targets: HTML

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #050910;
  color: #f2f6ff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.demo {
  width: 100%;
  max-width: 720px;
}
.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
}
.demo-sub {
  color: #475569;
  font-size: 0.875rem;
  margin-bottom: 1.75rem;
}

/* ── Browser frame ── */
.browser {
  width: 100%;
  border-radius: 0.875rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0
    rgba(255, 255, 255, 0.06);
}

/* ── Chrome bar (top — traffic lights + tabs) ── */
.browser-chrome {
  background: #1a1f2e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.875rem 0;
  height: 2.5rem;
}

/* Traffic lights */
.traffic-lights {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  flex-shrink: 0;
  padding-bottom: 0.5rem;
}

.tl {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}
.tl--close {
  background: #ff5f57;
}
.tl--min {
  background: #febc2e;
}
.tl--max {
  background: #28c840;
}

/* Tabs */
.browser-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  flex: 1;
  overflow: hidden;
}

.browser-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: #050910;
  border-radius: 0.5rem 0.5rem 0 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  max-width: 200px;
  min-width: 120px;
}

.tab-favicon {
  color: #38bdf8;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.tab-label {
  font-size: 0.72rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.tab-close {
  background: none;
  border: none;
  color: #475569;
  cursor: pointer;
  padding: 0.125rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.tab-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.tab-new {
  background: none;
  border: none;
  color: #334155;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  transition: color 0.15s;
  margin-bottom: 0.5rem;
}
.tab-new:hover {
  color: #64748b;
}

/* ── Toolbar ── */
.browser-toolbar {
  background: #141928;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
}

.nav-buttons {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.nav-btn {
  background: none;
  border: none;
  color: #475569;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
}
.nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.address-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  padding: 0.35rem 0.75rem;
}

.address-lock {
  color: #22c55e;
  display: flex;
  align-items: center;
}

.address-url {
  font-size: 0.8rem;
  color: #94a3b8;
}

.browser-actions {
  flex-shrink: 0;
}

/* ── Content area ── */
.browser-content {
  background: #0f172a;
  min-height: 280px;
  overflow: hidden;
}

/* Simulated webpage skeleton */
.page-hero {
  position: relative;
  min-height: 280px;
  overflow: hidden;
}

.page-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(124, 58, 237, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(14, 165, 233, 0.15) 0%, transparent 50%), #0f172a;
}

.page-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.page-logo {
  width: 5rem;
  height: 0.75rem;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.page-nav-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.page-nav-link {
  width: 2.5rem;
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.page-nav-cta {
  width: 4rem;
  height: 1.5rem;
  background: rgba(124, 58, 237, 0.4);
  border-radius: 6px;
}

.page-headline {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.page-eyebrow {
  width: 6rem;
  height: 0.5rem;
  background: rgba(56, 189, 248, 0.3);
  border-radius: 4px;
}

.page-h1 {
  width: 90%;
  height: 1.25rem;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
}
.page-h1--short {
  width: 60%;
}

.page-subtext {
  width: 75%;
  height: 0.625rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
}
.page-subtext--short {
  width: 55%;
}

.page-ctas {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.page-btn {
  height: 2rem;
  border-radius: 6px;
}
.page-btn--primary {
  width: 6.5rem;
  background: rgba(124, 58, 237, 0.6);
}
.page-btn--ghost {
  width: 5rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Browser Mockup</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <h1 class="demo-title">Browser Mockup</h1>
    <p class="demo-sub">Realistic browser frame for screenshots and demos.</p>

    <div class="browser" role="img" aria-label="Browser window mockup">

      <!-- Chrome bar -->
      <div class="browser-chrome" aria-hidden="true">

        <!-- Traffic lights -->
        <div class="traffic-lights">
          <span class="tl tl--close"></span>
          <span class="tl tl--min"></span>
          <span class="tl tl--max"></span>
        </div>

        <!-- Tab strip -->
        <div class="browser-tabs">
          <div class="browser-tab">
            <!-- Favicon placeholder -->
            <span class="tab-favicon">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                <circle cx="12" cy="12" r="10"/>
              </svg>
            </span>
            <span class="tab-label">stealthis.dev</span>
            <button class="tab-close" aria-label="Close tab">
              <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
                <path d="M18 6L6 18M6 6l12 12"/>
              </svg>
            </button>
          </div>
          <button class="tab-new" aria-label="New tab">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
              <path d="M12 5v14M5 12h14"/>
            </svg>
          </button>
        </div>

      </div>

      <!-- Toolbar -->
      <div class="browser-toolbar" aria-hidden="true">

        <!-- Nav buttons -->
        <div class="nav-buttons">
          <button class="nav-btn" aria-label="Go back" disabled>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <path d="M19 12H5M12 19l-7-7 7-7"/>
            </svg>
          </button>
          <button class="nav-btn" aria-label="Go forward" disabled>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <path d="M5 12h14M12 5l7 7-7 7"/>
            </svg>
          </button>
          <button class="nav-btn" aria-label="Refresh">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <path d="M1 4v6h6M23 20v-6h-6"/>
              <path d="M20.49 9A9 9 0 005.64 5.64L1 10M23 14l-4.64 4.36A9 9 0 013.51 15"/>
            </svg>
          </button>
        </div>

        <!-- Address bar -->
        <div class="address-bar">
          <span class="address-lock" aria-hidden="true">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
              <path d="M7 11V7a5 5 0 0110 0v4"/>
            </svg>
          </span>
          <span class="address-url">stealthis.dev</span>
        </div>

        <!-- Extensions area -->
        <div class="browser-actions">
          <button class="nav-btn" aria-label="Bookmark">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/>
            </svg>
          </button>
        </div>

      </div>

      <!-- Content area -->
      <div class="browser-content" aria-hidden="true">
        <!-- Simulated webpage content -->
        <div class="page-hero">
          <div class="page-gradient"></div>
          <div class="page-nav">
            <div class="page-logo"></div>
            <div class="page-nav-links">
              <div class="page-nav-link"></div>
              <div class="page-nav-link"></div>
              <div class="page-nav-link"></div>
              <div class="page-nav-cta"></div>
            </div>
          </div>
          <div class="page-headline">
            <div class="page-eyebrow"></div>
            <div class="page-h1"></div>
            <div class="page-h1 page-h1--short"></div>
            <div class="page-subtext"></div>
            <div class="page-subtext page-subtext--short"></div>
            <div class="page-ctas">
              <div class="page-btn page-btn--primary"></div>
              <div class="page-btn page-btn--ghost"></div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</body>
</html>

Browser Mockup

A realistic browser window frame for showcasing screenshots, app demos, or design previews. Includes traffic-light window controls, a tab strip, address bar, and navigation buttons — all in pure CSS.

Features

Traffic-light window controls (close/minimize/maximize dots)
Address bar with lock icon and URL
Browser tab with favicon placeholder and close button
Navigation buttons (back, forward, refresh)
Inner content area — drop any content or <img> inside
Pure CSS, zero JavaScript
Dark and responsive

Usage

Replace the .browser-content inner markup with any content you want to showcase. For screenshots, use an <img> element that fills the content area.