Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



6 Commits

Repository files navigation

CSS & SVG Device Shapes

This a collection of responsive, lightweight CSS & SVG device shapes. The goal here was to create responsive device shapes with minimal markup and to keep filesize as small as possible. Full blog post about it here. I also wanted to embed html content within the device screens so CSS is easier to work with than SVG for that. It's as simple as doing this:

<div class="desktop">
   <div class="content">
       <!-- html content goes here e.g. youtube embedded iframe -->

Demo of the end result here:

Screenshot of all 4 devices

CSS & SVG Device Shapes


No releases published


No packages published