DEV Community

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

Posted on

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

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>


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

Below is the final code

HTML



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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Top comments (16)

Collapse
 
shivang02 profile image
Shivang Dubey

This is so cool yet so simple!

Collapse
 
ryandsouza13 profile image
Ryan

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

Collapse
 
saravananks profile image
SARAVANAN. K.S

Came to know that filter property exists in css :)

Collapse
 
ryandsouza13 profile image
Ryan

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...

Collapse
 
farhangq profile image
Farhang Qahwe

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

Collapse
 
ryandsouza13 profile image
Ryan

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

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
ryandsouza13 profile image
Ryan

Glad you liked it. Thanks 👍

Collapse
 
ben profile image
Ben Halpern

Wow

Collapse
 
ryandsouza13 profile image
Ryan

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

Collapse
 
maxart2501 profile image
Massimo Artizzu

Nice effect! Bravo 👏

Collapse
 
ryandsouza13 profile image
Ryan

Thanks. Glad you liked it :)

Collapse
 
craigdev937 profile image
Craig Johnson

I love practicing CSS, so that was awesome!.

Collapse
 
ryandsouza13 profile image
Ryan

Yes, CSS is awesome. 👍

Collapse
 
adzika profile image
adzika

Wow, that's awesome and straightforward. :)

Collapse
 
ryandsouza13 profile image
Ryan

Yes, it's pretty simple.