Skip to content
UI Kit
Accent color

Device mockups for browser, phone and laptop

Browser windows, phones, laptops and device scenes with your content inside.

2 components · 16 variants
Switch category

Your screens in a frame of their own

A mockup puts a screenshot into context, and visitors understand at once whether it is a website, an app or both. The two components here draw devices of their own shape in CSS, so they stay sharp at every size, follow light and dark mode and take a live component or an image inside.

Mockups holds single frames, a browser window with or without tabs, a light and dark window, phone, tablet, laptop, desktop display and a round watch. One width scales the whole device. Mockup scenes combine them, desktop and phone together, three devices, quiet perspective, a page that scrolls inside its device on its own or on hover, and a floating collage of cards.

Show a real screen, the clearer the screenshot, the stronger the mockup. Pick the device your customers use, a phone for apps, a browser for SaaS. A scene with three devices fits a hero, inside a feature grid a single frame reads better.

mockup

Mockups

Browser windows and devices of our own shape, drawn in CSS. Put a live component or an image inside, one width scales everything.

Props and details · Mockups

Browser window

Three dots and a centered address bar. The page inside renders at 1200 px and scales to fit.

Browser with tabs

Tabs above the toolbar, the active one joins it. Back, forward and reload sit before the address.

Light and dark window

tone fixes a window light or dark, whatever the page is. Good for showing both modes of a product.

Phone

Our own phone shape with soft corners, a camera capsule or a single lens, and a metal or ink frame.

Tablet

Even bezels and a camera on the long edge. Here an app at 1024 px, scaled into landscape.

Laptop

An even bezel without a notch, a hinge band and a slim base with feet. The width is the base.

Desktop display

A 16:9 display with a thin bezel, a status light in the chin and a stand with a flat foot.

Round watch

A round case with minute marks on the bezel and two pushers. The ring on the screen fills as it appears.

mockup-scene

Mockup scenes

Devices that overlap, windows in quiet perspective, pages that scroll inside their device and floating card collages.

Props and details · Mockup scenes

Desktop and phone

One website on two screens. The phone stands in front and drifts a little against the page while it scrolls.

Tablet, laptop and phone

Three devices as one picture, the laptop in the middle. The front devices move at their own pace when you scroll.

Perspective

A window turned a few degrees. It turns towards you while it scrolls in and follows the mouse with a soft light.

Laid back

The picture lies back like a print on a table and rises towards you while it scrolls into view.

Scrolling website

The page scrolls inside the window in calm steps, rests and glides back up. A thin thumb moves along.

Scrolling phone

Two phones side by side. The left one scrolls on its own, the right one follows your page scroll.

Scroll on hover

The page waits at the top and scrolls to the end while you point at it or focus it with the keyboard.

Floating collage

Cards from a product in layers. They float gently, shift with the mouse and drift with the scroll, near layers more.

Similar components

More from Visuals, the same area of the kit.

Often combined with

Sections that usually sit next to Mockups on a page.

Often searched

Jump to

Copied to the clipboard