webdevpuneet.com

Related Snippets

83 in Layouts category
51–56 of 60

Laptop Mockup

Browser Window Mockup

Tablet Mockup

Phone Mockup

Email Inbox

Wave Divider

Laptop Mockup — Free CSS MacBook Device Frame Snippet

Laptop Mockup · Layouts · Plain HTML, CSS & JS · Live preview

CategoryLayouts
Tags3D EffectsParallaxText EffectsCSS Grid

Copy & paste

Source Code

<div class="lm-stage">
  <div class="lm-laptop">
    <div class="lm-lid">
      <div class="lm-cam"></div>
      <div class="lm-screen">
        <div class="lm-top"><span class="lm-dots"><i></i><i></i><i></i></span><span class="lm-addr">acme.studio</span></div>
        <div class="lm-page">
          <div class="lm-nav"><span class="lm-brand"></span><span class="lm-links"><i></i><i></i><i></i></span></div>
          <div class="lm-hero">
            <h1>Design that ships</h1>
            <p>A studio site rendered live inside a CSS laptop.</p>
            <span class="lm-btn">Explore work</span>
          </div>
          <div class="lm-thumbs"><span></span><span></span><span></span><span></span></div>
        </div>
      </div>
    </div>
  </div>
  <div class="lm-base"><div class="lm-notch"></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, 7 days free), 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 laptop
Lid, screen, and base wedge with no images.
16:10 screen
aspect-ratio keeps authentic proportions.
Hinge base detail
Gradient wedge, edge strip, and thumb notch.
Live content
Real styled page, including gradient text.
Pointer parallax
A gentle rotateY tilt toward the cursor.
Responsive
max-width and viewport units shrink it cleanly.
Slot-friendly
Swap the screen for any site or screenshot.
No dependency
Pure HTML/CSS/JS for device shots.

About this UI Snippet

Laptop Mockup — Pure-CSS MacBook-Style Frame

Screenshot of the Laptop Mockup snippet rendered live

A laptop mockup presents a website or app inside a MacBook-style frame — the standard device shot for landing pages, portfolios, and case studies. This one is built entirely in HTML and CSS: a lid with a 16:10 screen, a hinge base with a notch, and a live web page inside, plus a gentle pointer-driven parallax tilt in vanilla JavaScript. No device photo, no dependency.

Lid, screen, and base in three pieces

The structure mirrors a real laptop: a dark .lm-lid (the bezel) wrapping the .lm-screen, and a separate .lm-base wedge below it for the deck. The base uses a vertical gradient to suggest the aluminium taper, a ::before strip for the keyboard-edge highlight, and a centered .lm-notch for the thumb cutout — together they read as the bottom half of an open laptop without a single image.

Aspect-ratio screen

The screen uses aspect-ratio: 16/10 so it keeps authentic laptop proportions at any width, and max-width with a viewport unit lets the whole device shrink responsively on small screens. Inside, a mini browser bar (traffic lights plus an address) and a sample studio page demonstrate that the screen holds real, styled content — including a gradient background-clip: text headline — rather than a flat screenshot.

Subtle parallax for life

A pointer-move handler reads the cursor's horizontal position over the stage, normalizes it to roughly −0.5…0.5, and applies a small rotateY within a perspective so the laptop appears to turn slightly toward the cursor. The rotation is gentle (a few degrees) and resets on pointerleave, adding a premium, interactive feel that a static mockup can't — and it degrades gracefully since the frame is fully styled without it.

Why CSS over an image

A CSS device frame is resolution-independent, recolorable, and — crucially — can contain live, scrolling, interactive UI. You can drop an actual running component into the screen, switch its theme, or animate it, which is exactly what you want when demonstrating a product rather than just illustrating one.

Reusing it

Replace the .lm-page contents with your site or an <img>, and keep the device as a wrapper component. Pair it with a browser window mockup or a phone mockup to present a responsive design across form factors.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA CSS laptop renders with a sample studio site on its screen.
  2. 2
    Move your pointerThe laptop tilts subtly toward the cursor with parallax.
  3. 3
    Note the proportionsThe screen keeps a 16:10 aspect ratio at any width.
  4. 4
    Resize the pageThe device shrinks responsively on narrow viewports.
  5. 5
    Drop in your siteReplace the page content with your own UI or screenshot.
  6. 6
    Reuse as a wrapperKeep the frame as a component with a screen slot.

Real-world uses

Common Use Cases

SaaS landing page device shots
Show the app inside a MacBook-style frame beside a startup hero, with a 16:10 screen kept authentic through aspect-ratio and no device photo.
Portfolio device grids
Frame web work inside a bento grid of mockups, with a subtle pointer parallax tilt giving each laptop a lifelike feel.
Case study dashboards
Present a dashboard layout on a laptop, with a live styled page inside the lid so the screen content stays crisp at any size.
Responsive showcases
Pair with a tablet mockup and phone to show one design across devices, using a hinge base wedge with an edge strip and thumb notch.
Agency project displays
Display client projects next to an agency hero, and learn how a gradient wedge builds a convincing laptop base entirely from CSS.
Related: Split Screen Layout
See the Split Screen Layout for a related layouts pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Pure CSS. It's three pieces — a dark lid wrapping the screen, and a separate base wedge with a gradient, an edge highlight pseudo-element, and a center notch. There's no device image, so it scales without blurring and every part can be recolored or resized through CSS.

The screen uses the CSS aspect-ratio property set to 16/10, so it maintains laptop proportions automatically regardless of the device's width. Combined with a max-width in viewport units on the lid, the whole laptop scales down responsively while keeping its shape on small screens.

A pointermove listener on the stage reads the cursor's horizontal position, normalizes it to about minus a half to plus a half, and applies a small rotateY inside a CSS perspective so the laptop turns slightly toward the pointer. It resets on pointerleave, and because the frame is fully styled without it, the effect is purely an enhancement.

Yes — that's the benefit of a CSS frame. The screen is live DOM, so you can place a running component, a scrolling page, or any other snippet inside and it will function normally. Replace the .lm-page contents with your UI, or drop in an <img> if you only need a static shot.

Make the device a component that renders a screen slot for children, so any page can be wrapped. Put the pointer parallax in a mount effect with cleanup, or omit it. In Tailwind, build the lid and base with rounded utilities and gradients, set the screen with aspect-[16/10], and add a perspective wrapper for the tilt.