iPhone 5 Created with CSS3

Matt Boldt is a Web Designer from Dallas Texas, has created an inspiring iPhone 5 with CSS3, single-element approach. This is amazing Boldt, keep it up! 

Coding it using one element limits you to basically 3 objects. The main element, the :before, and the :after. You have to choose wisely and everything else has to be hacked together using shadows and gradients. 

I couldn’t find a nice way to put a screen on it just using one html tag. 

You can see the final rendered result of Single Element CSS3 iPhone 5 here and view the code here!

Via

Frequently Asked Questions

How was the iPhone 5 drawn with a single HTML element?

Web designer Matt Boldt built the entire iPhone 5 from one HTML tag plus its :before and :after pseudo-elements. Everything else — buttons, speaker, gradients — was constructed with layered box-shadows and CSS gradients, since a single element only gives three shapes to work with.

What CSS properties make single-element drawings possible?

The :before and :after pseudo-elements provide two extra shapes, while box-shadow can stack many copies of a shape from one element. Border-radius rounds corners, linear and radial gradients add color depth, and transforms position everything precisely.

Can a beginner try CSS art?

Yes — start with simple shapes like circles and rounded rectangles using border-radius, then combine them into slightly more complex drawings. CodePen is a popular place to practice and study how others build their CSS illustrations.

Why do developers create art with CSS?

CSS art is both a creative challenge and a way to master the language's capabilities — drawing without images forces you to understand positioning, shadows, and gradients deeply. Many developers treat it as deliberate practice for front-end skills.