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);
}
Top comments (16)
This is so cool yet so simple!
Yes, it is quite simple. The filter CSS property does most of the magic here.
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...
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.
Glad you liked it. Thanks 👍
Wow
Hi Ben. That 'Wow' just made my day. Thanks a lot. 👍
Nice effect! Bravo 👏
Thanks. Glad you liked it :)
I love practicing CSS, so that was awesome!.
Yes, CSS is awesome. 👍
Wow, that's awesome and straightforward. :)
Yes, it's pretty simple.