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