DEV Community

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

Ryan on June 29, 2020

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 fa...
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
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
ryandsouza13 profile image
Ryan •

Glad you liked it. Thanks 👍

Collapse
 
craigdev937 profile image
Craig Johnson •

I love practicing CSS, so that was awesome!.

Collapse
 
ryandsouza13 profile image
Ryan •

Yes, CSS is awesome. 👍

Collapse
 
ben profile image
Ben Halpern •

Wow

Collapse
 
ryandsouza13 profile image
Ryan •

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

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
 
maxart2501 profile image
Massimo Artizzu •

Nice effect! Bravo 👏

Collapse
 
ryandsouza13 profile image
Ryan •

Thanks. Glad you liked it :)

Collapse
 
adzika profile image
adzika •

Wow, that's awesome and straightforward. :)

Collapse
 
ryandsouza13 profile image
Ryan •

Yes, it's pretty simple.