A Collection Of CSS Only Devices – devices.css

Category: CSS & CSS3 , Recommended | September 14, 2022
Views Total:114 views
Official Page:Go to website
Last Update:September 14, 2022


A Collection Of CSS Only Devices – devices.css


The devices.css provides a collection of popular desktop and mobile devices (with variable colors & sizes) created using pure HTML and CSS.

Available devices:

  • iPhone 14 Pro
  • iPhone 14
  • iPhone X (Silver)
  • iPhone 8 (Silver, Gold and Space Gray)
  • iPhone 1st gen
  • Google Pixel 6 Pro (White, Gold, and Black)
  • Google Pixel 2 XL (Black)
  • Google Pixel (Very Silver, Quite Black, and Really Blue)
  • Samsung Galaxy S8 (Midnight Black and Coral Blue)
  • iPad Pro (Silver, Gold, Rose Gold, and Space Gray)
  • Surface Pro
  • Surface Book
  • Surface Studio
  • MacBook (Silver, Gold, Rose Gold, and Space Gray)
  • MacBook Pro (Silver and Space Gray)
  • iMac Pro
  • Apple Watch Ultra
  • Apple Watch 8
  • HomePod
  • Pro Display XDR

How to use it:

Import the main stylesheet devices.css into the document.

<link rel="stylesheet" href="dist/devices.css">

Create the HTML (iPhone X for example).

<div class="device device-iphone-x">
  <div class="device-frame">
    your own content here
  <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 class="device-home"></div>

Config the CSS library by overriding the default variables in the SCSS file.

// Core variables
$primary-color: #5764c6 !default;
$primary-color-dark: darken($primary-color, 3%) !default;
$primary-color-light: lighten($primary-color, 3%) !default;
$secondary-color: lighten($primary-color, 40%) !default;
$secondary-color-dark: darken($secondary-color, 3%) !default;
$secondary-color-light: lighten($secondary-color, 3%) !default;
// Gray colors
$dark-color: #454d5d !default;
$light-color: #fff !default;
$gray-color: lighten($dark-color, 40%) !default;
$gray-color-dark: darken($gray-color, 20%) !default;
$gray-color-light: lighten($gray-color, 20%) !default;
$bg-color: lighten($dark-color, 66%) !default;
$bg-color-dark: darken($bg-color, 3%) !default;
$bg-color-light: $light-color !default;
// Sizes
$layout-spacing: .4rem !default;
$layout-spacing-sm: .2rem !default;
$layout-spacing-lg: .8rem !default;
// Responsive breakpoints
$size-xs: 480px !default;
$size-sm: 600px !default;
$size-md: 840px !default;
$size-lg: 960px !default;
$size-xl: 1280px !default;
$size-2x: 1440px !default;



  • Added iPhone 1st gen


  • Added iPhone 14


  • Added iPhone 14 Pro

v0.2.0 (09/07/2022)

  • Update CSS styles

You Might Be Interested In:

Leave a Reply