3 secrets behind single div CSS art

When I started making CSS drawings, I didn’t know about ‘Single div CSS art’, but I was very amazed by what people could draw with only one div. So, I began to wonder how these drawings were made. Soon I found that they all use three components:

‘ Pseudo elements ’
‘ Shadow ’
‘ Gradients ’

I will give more details on how these three elements can help you make single div CSS art.

1- Pseudo elements

Yes, it’s a single div, but using pseudo elements will give you 2 other elements to style: div::before and div::after.

The ::before selector inserts something before the div.

The ::after selector inserts something after the div.

Think of the div as an element that goes between these two selectors.

You can use the ‘content’ property to insert the content you want to add or you can keep it blank (content:' ') and add width/height, border, and background to make shapes.

2- Shadow

The box-shadow property is not just used to add a single shadow, we can also set multiple box-shadows to generate many shapes with different color, size, spread, and blur values:

div {
      border: 1px solid;
      border-radius:50%;
      width: 50px;
      height: 50%;
      padding: 50px;
      box-shadow: 5px 5px blue, 10px 10px red, 15px 15px yellow;
    }

3- Gradients

Gradients are important when it comes to CSS art in general – you will always find gradients. The more gradients you have, the more complex your drawings will be.

You can also make shapes with gradients by combining multiple gradients in the background-image property:

div{
      width : 200px;
      height : 100px;
      background: radial-gradient(ellipse at 50% 82%, red 67%, transparent 52%)
    }

Demo

That’s all! Now, let’s do an example and draw this ‘Single div perfume bottle’ together.

This is made up of 3 primary element:

The black element will be our div.
The green element represents the ::before selector.
The red element is the ::after selector.

That’s our single div HTML element :

<div></div>

Let’s start writing CSS.

So, the first thing we will take care of is the black element.

This is a div element that has a gray background color, a border-radius of 10 pixels, and a box shadow for dimension.

Notice that we are using multiple shadows here.

.perfume {
      position: absolute;
      width: 222px;
      height: 328px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background: #ececec;
      border-radius: 10px;
      box-shadow: -2px 9px 8px #5d56564a, 0px 1px 3px #888;
      border-width: 1px;
      border-style: ridge;
    }

Let’s move to the green element, which we will make using the ::before selector. You can see that this one contains many shapes, and we are going to make them using gradients.

This is the code for our first shape, which is nothing but a linear gradient of many different colors.

.perfume::before {
      content: '';
      position: absolute;
      display: block;
      width: 164px;
      height: 157px;
      top: -148px;
      background-repeat: no-repeat;
      background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%);
      background-size: 92px 17px;
      background-position: 64px 124px;

    }

Our second shape is the same as the previous one, but with a smaller size and in a different position.

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%);
background-size: 92px 17px, 72px 20px;
background-position: 64px 124px, 74px 101px;

Next, is a radial gradient that will represent the circle on the top. Notice that we added this shape before the one that goes under it. Always start with the top shapes so that they won’t be covered by the shape below them.

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%);
background-size: 92px 17px, 72px 20px, 10px 10px;
background-position: 64px 124px, 74px 101px, 106px 50px;

Now that we have added the previous shape, we will add the linear gradient that goes under it. This gradient will be the same as the first one, but with a different size and position.

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%);
background-size: 92px 17px, 72px 20px, 10px 10px, 80px 52px;
background-position: 64px 124px, 74px 101px, 106px 50px, 70px 48px;

One other linear gradient.

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(208, 208, 208, 1) 6%, rgba(207, 207, 207, 1) 7%, rgba(40, 40, 40, 1) 27%, rgba(13, 12, 12, 1) 51%, rgba(40, 40, 40, 1) 70%, rgba(207, 207, 207, 1) 93%, rgba(208, 208, 208, 1) 95%);
background-size: 92px 17px, 72px 20px, 10px 10px, 80px 52px, 92px 17px;
background-position: 64px 124px, 74px 101px, 106px 50px, 70px 48px, 63px 148px;

Now, it’s time to fill all the blank spaces between all these shapes. For this, we will add four simple linear gradients.

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(208, 208, 208, 1) 6%, rgba(207, 207, 207, 1) 7%, rgba(40, 40, 40, 1) 27%, rgba(13, 12, 12, 1) 51%, rgba(40, 40, 40, 1) 70%, rgba(207, 207, 207, 1) 93%, rgba(208, 208, 208, 1) 95%), linear-gradient(#434343, #434343), linear-gradient(#939393, #939393), linear-gradient(#2f2f2f, #2f2f2f),
    linear-gradient(#878787, #878787);
background-size: 92px 17px, 72px 20px, 10px 10px, 80px 52px, 92px 17px, 80px 3px, 72px 3px, 76px 6px, 82px 8px;
background-position: 64px 124px, 74px 101px, 106px 50px, 70px 48px, 63px 148px, 70px 46px, 74px 99px, 73px 121px, 70px 140px;

Yes, it’s a little bit crazy to see all these different gradients, each with its own position, color, and size, but that’s what makes our drawing look good.

That’s all for the ::before selector, we have now finished the top part 😌

Let’s move to the ::after selector and add the red element to our drawing.

Don’t worry; this one is easy. It’s just an element with some border-radius and two linear gradients.

.perfume::after {
      content: '';
      display: block;
      box-sizing: border-box;
      width: 203px;
      height: 292px;
      position: absolute;
      top: 4px;
      left: 10px;
      background-color: #e1e1e1;
      border: 1px solid #1919195e;
      border-top-left-radius: 18px 151px;
      border-top-right-radius: 18px 151px;
      border-bottom-left-radius: 34px;
      border-bottom-right-radius: 34px;
      background-repeat: no-repeat;
      background-image: linear-gradient(#ebebeb, #ebebeb), linear-gradient(#2f2f2f, #2f2f2f);
      background-size: 194px 18px, 190px 1px;
      background-position: 3px 0px, 3px 18px;
    }

Attributions:

undefined by undefined

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments

3 secrets behind single div CSS art

1- Pseudo elements

2- Shadow

3- Gradients

Demo

Code