Creating a Fake 3D Effect in CSS Using a Single Div
Tags: html, css, webdev
Published: 2020-06-29 09:39:43

I recently came across an article titled [Faking 3D Elements with CSS](https://uglyduck.ca/fake-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`.
```HTML
<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`
```CSS
.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.
```CSS
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.
```CSS
.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.
```CSS
.circle{
  ...
  ...
  display: flex;
  justify-content: center;
  align-items: center;
}
```
By now, we have something that looks like this
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vf68bo57y6l82kjvzmfr.jpg)

For the final 3D effect, add the below two CSS properties to the `::before` pseudo element.
```CSS
.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.
```CSS
body{
  ...
  ...
  background: #990000;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rtxofwpapgjfpdvpjezt.jpg)

Hold on. We are still missing one final thing - the drop shadow. We'll achieve it by using the `::after` pseudo element.
```CSS
.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`.
```CSS
.circle{
  ...
  ... 
  position: relative;
}
```
And our fake 3D effect is ready. Pretty simple, isn't it?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r4i3cw5g3v19b6bfs09w.jpg)

Below is the final code
#HTML
```HTML
<div class="circle"></div>
```
#CSS
```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);
}
```