ASTROBOT.DESIGN

Mockuuups Playground

See your website beautifully presented on different devices. Built with pure CSS using devices.css.

Phones Tablets Computers Wearables

Device Showcase

Live previews of astrobot.design rendered at real device viewport dimensions, powered by devices.css.

Phones

iPhone 14 Pro

6.1" OLED

iPhone X

5.8" OLED

Google Pixel 2 XL

6" OLED

Samsung Galaxy S8

5.8" AMOLED

Tablets

iPad Pro

12.9" Liquid Retina

Surface Pro

13" PixelSense

Computers

MacBook Pro

15" Space Gray

MacBook Pro

15" Silver

MacBook Pro

15" Midnight

iMac

27" Retina 5K

Wearables

Apple Watch Series 8

45mm OLED

Apple Watch Ultra

49mm Always-On Retina

Start Using Devices.css

Live Example

Here's an iPhone X displaying the Astrobot.design website:

HTML Code

All you need is a few lines of HTML: 

<div class="device device-iphone-x">
  <div class="device-frame">
    <img class="device-screen"
         src="screenshot.jpg">
  </div>
  <div class="device-stripe"></div>
  <div class="device-header"></div>
  <div class="device-sensors"></div>
  <div class="device-btns"></div>
  <div class="device-power"></div>
</div>

Change the image src and device class name to switch devices.

How devices.css Works

Core Concept

devices.css provides modern device mockups built entirely in pure CSS. No images, no complex JavaScript—just pure CSS with a simple HTML structure. All devices use the same base HTML markup, controlled by CSS classes.

HTML Structure

Every device uses the same HTML structure with a different device class name: 

<div class="device device-iphone-14-pro">
  <div class="device-frame">
    <img class="device-screen" src="screenshot.jpg" />
  </div>
  <div class="device-stripe"></div>
  <div class="device-header"></div>
  <div class="device-sensors"></div>
  <div class="device-btns"></div>
  <div class="device-power"></div>
</div>

Device Classes

Change the look by using different device class names:

  • • device-iphone-14-pro, device-iphone-x, device-iphone-8
  • • device-google-pixel-2-xl, device-google-pixel
  • • device-galaxy-s8
  • • device-ipad-pro, device-surface-pro-2017
  • • device-macbook-pro, device-imac

Key Features

  • 100% pure CSS—no images or complex JavaScript
  • Accurate device aspect ratios match real hardware
  • Supports phones, tablets, computers, and watches
  • Perfect for landing pages and product showcases

Getting Started

1. Include the CSS

<link rel="stylesheet" href="https://unpkg.com/devices.css@4.0.0/dist/devices.css">

2. Add the HTML Structure

Use the standard device markup with your chosen device class.

<div class="device device-iphone-14-pro">
  <div class="device-frame">
    <img class="device-screen" src="screenshot.jpg" />
  </div>
  <!-- device elements -->
</div>

3. Add Your Screenshot

Place a screenshot of your website in the device-screen element. The aspect ratio will automatically match the real device.