Creative Photoshop Art in CSS

This article will present a creative technique to make art in Photoshop by only using ellipses and rectangles, and how you can recreate the same style using CSS/HTML.


Imagine sitting in a classroom and procrastination kicks in. You are totally zoned out and can’t keep track. The only thing in front of you is a 13” Macbook Air. What do you do? Read articles, login to social media or scribble?

I chose scribbling even though I didn’t have a Wacom tablet. I found myself often opening Photoshop and just starring at all the various effects and possibilities.

At some point I took a good look at the toolbox and started to throw out layers of circles in different colors. I found it a quick way to paint with tons of colors, some kind of minimalistic cubism. All I needed to know was how to change width, height, position, color, and layer position. No more wasteful procrastination!


I had major problems sharing my art due to heavy JPG files. After a brainstorming session over some beers, it hit me that if I create my art in CSS, it will be in vectors and it will be extremely lightweight. So I created a <div> string for a circle based object in CSS and isolated myself for one week, with zero sleep.

<div style=”left:10px; top:10px; width:100px; height:100px; background:#000; -webkit-transform: rotate(0deg);transform: rotate(0deg); border-radius:50%; position:absolute;”></div>

Final result in CSS/HTML –

In my first project I only used pixels to set the size and position of each object. This limited me to move or change the size of large groups of objects. My way to deal with this problem was to create a div that function much like a Group folder in Photoshop. That’s your canvas in pixels. The div’s inside the Group are written in percent. So as long as you proportionally change the width and height of the Group div, you will be able to change size and position of your CSS art.


<div style=”left:20px; top:20px; width:3000px; height:3000px; position:absolute;”>

<div style=”left:0%; top:0%; width:100%; height:100%; background:#fff;”></div>

<div style=”left:5%; top:5%; width:50%; height:50%; background:#eee;”></div>



The goal behind this project was to bridge the gap between code and art by displaying how a very basic line of code can be communicated differently. I believe that this particular technique implemented in CSS can enable front-enders to create unique interfaces for web-based games, icons or banners that are light, extremely nerdy and highly customisable.

I’m fully aware that the technical height of this technique is fairly low but there is a philosophical twist to it that is worth giving a thought.

Could languages like CSS/HTML work as a bridge for art to enter web design, making art more accessible for a larger audience to learn, discuss, participate and contribute?

Current state of Development


5 Things You Should Stop Doing With jQuery

Pros & Cons Of Using Hybrid Mobile App Development In Your Business