loading...
Cover image for Creating a Fake 3D Effect in CSS Using a Single Div

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

ryandsouza13 profile image Ryan ・3 min read

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
Alt Text

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;
}

Alt Text

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?
Alt Text

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);
}

Posted on Jun 29 by:

ryandsouza13 profile

Ryan

@ryandsouza13

Just another guy staring at the code on the screen and wondering what it actually does.

Discussion

markdown guide
 

This is so cool yet so simple!

 

Yes, it is quite simple. The filter CSS property does most of the magic here.

 
 

Glad you liked it. Thanks 👍

 
 

Thanks. Glad you liked it :)

 

Thanks for sharing. I love filters. Backdrop-filter's also doing great

 

Yes, backdrop-filter is a really cool property, especially for elements that contain text on a blurred background.

 

Came to know that filter property exists in css :)

 

Yeah. One can do many cool things with it. Check out the various values that you can use. developer.mozilla.org/en-US/docs/W...

 
 

Hi Ben. That 'Wow' just made my day. Thanks a lot. 👍

 

I love practicing CSS, so that was awesome!.

 

Yes, CSS is awesome. 👍

 

Wow, that's awesome and straightforward. :)

 

Yes, it's pretty simple.