Creating a Fake 3D Effect in CSS Using a Single Div

#html #css #webdev

I recently came across an article titled Faking 3D Elements with CSS by Bradley Taunt. It's a very easy-to-understand article on how to create a fake 3D effect using not more than 2 divs.

I decided to recreate a similar effect using just a single div, and I guess the result seemed quite close enough. So, let's have a look at how we can achieve it.

As mentioned, we'll only require a single div. In your HTML, add a div and give it a class of circle.

<div class="circle"></div>

Now, let's start working on the CSS. First we'll add the below styles to the div with the class of circle

.circle{
  height: 400px;
  width: 400px;
  background: linear-gradient(#f00202 0%, #bd0404 10%, #7d0404 50%, #4a0202 100%);
  border-radius: 50%;
}

Add a few flexbox properties to the body to vertically and horizontally center the circle on the page.

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Now, we'll require one more circle that will be placed inside the main circle. This inner circle will be mainly responsible for producing the desired fake 3D effect. To create the inner circle we will be using the ::before pseudo element.

.circle::before{
  content: "";
  height: 360px;
  width: 360px;
  background: linear-gradient(#f06060 0%, #a30505 60%, #4d0202 100%);
}

Place it exactly at the center of the main circle by adding the necessary flexbox properties to the center class.

.circle{
  ...
  ...
  display: flex;
  justify-content: center;
  align-items: center;
}

By now, we have something that looks like this

For the final 3D effect, add the below two CSS properties to the ::before pseudo element.

.circle::before{
  ...
  ...
  border-radius: 50%;
  filter: blur(18px);
}

And lastly, let's give the body a background-color of #990000, which is a shade of red.

body{
  ...
  ...
  background: #990000;
}

Hold on. We are still missing one final thing - the drop shadow. We'll achieve it by using the ::after pseudo element.

.circle::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6  );
  bottom: -60px;
  z-index: -1;
  filter: blur(10px);
}

Notice that the ::after pseudo element has been given the position of absolute. Make sure that it is positioned in relation to the main div with the class of circle. So, give the main div a position of relative.

.circle{
  ...
  ... 
  position: relative;
}

And our fake 3D effect is ready. Pretty simple, isn't it?

Below is the final code

HTML

<div class="circle"></div>

CSS

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #990000;
}

.circle{
  height: 400px;
  width: 400px;
  background: linear-gradient(#f00202 0%, #bd0404 10%, #7d0404 50%, #4a0202 100%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.circle::before{
  content: "";
  height: 360px;
  width: 360px;
  background: linear-gradient(#f06060 0%, #a30505 60%, #4d0202 100%);
  border-radius: 50%;
  filter: blur(18px);
}

.circle::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6  );
  bottom: -60px;
  z-index: -1;
  filter: blur(10px);
}