Pure CSS Devices
Last Updated on June 29, 2026 by Editorial Team
Modern minimalist devices mockups made with CSS. More devices are coming.
Current devices:
- iPhone X (Silver)
- iPhone 8 (Silver, Gold and Space Gray)
- iPad Pro (Silver, Gold, Rose Gold and Space Gray)
- Samsung Galaxy S8 ( Midnight Black and Coral Blue)
- MacBook Pro (Silver and Space Gray)
- Surface Studio
Demo: https://picturepan2.github.io/devices.css
Created by Yan Zhu
What makes this iPhone X mockup worth a closer look is that the bezel, the notch, the antenna lines, and the front camera cutout are all rendered in pure CSS rather than baked into a flat image.
The screen area in the preview shows a soft gradient wash of magenta, blue, and warm white, which is just placeholder art, but it demonstrates exactly how your own screenshot or app UI will sit inside the frame once you swap it in.
Because the device shell is code rather than a raster graphic, the edges stay crisp at any size, and the silver-and-black finish shown here holds up whether you’re viewing it on a small blog thumbnail or blown up on a presentation slide.
This kind of CSS-based device frame earns its keep in places where a static PNG mockup starts to feel limiting.
App landing pages are the obvious fit: drop a live screenshot, a looping demo, or even embedded video into the screen area and you get a phone mockup that scales responsively with the rest of the page instead of pixelating on retina displays.
Product documentation and portfolio case studies benefit the same way, since you can show an interface inside a realistic iPhone frame without shipping a heavy image file.
It’s also handy for quick client presentations where you want to swap between light and dark screenshots on the fly without re-exporting anything from a design tool.
Swapping In Your Own Screen Content
Editing this mockup means working directly in the markup and stylesheet rather than in a layered image file.
You duplicate the existing device structure, then replace the placeholder screen element with your own image, background, or embedded content, keeping the same class names so the CSS still positions everything correctly inside the frame.
Sizing is handled by adjusting scale on the outer wrapper, so you can shrink the phone down for a feature grid or blow it up for a full-width hero without touching the underlying proportions.
Because the frame color and finish are controlled through CSS classes, switching between the silver iPhone X shown here and the other finishes in the set, like the iPhone 8 in gold or space gray, is a matter of changing a class rather than sourcing a new asset.
If you’re building a page that mixes several devices, this same approach lets you line up an iPhone next to the MacBook Pro or Surface Studio frame using consistent markup, which keeps the whole composition visually coherent since every device shares the same minimalist, screen-forward design language.
For anyone presenting a single mobile screen in isolation, pairing this iPhone X frame with a plain, softly lit background, much like the neutral gray backdrop in the preview, keeps the focus entirely on the interface itself rather than on the mockup styling.
