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.
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.
Wow
Hi Ben. That 'Wow' just made my day. Thanks a lot. 👍
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...
Nice effect! Bravo 👏
Thanks. Glad you liked it :)
Glad you liked it. Thanks 👍
I love practicing CSS, so that was awesome!.
Yes, CSS is awesome. 👍
Wow, that's awesome and straightforward. :)
Yes, it's pretty simple.