When it comes to creating a great piece of web-based art, the details are what stand out. Lighting and shading effects are prime examples. They can turn a flat, 2D work into an immersive 3D experience.

For quite a while, the ability to add realistic light and shade to an illustration or animation seemed like the holy grail. The technology wasn’t always there. Thus, developers had to find workarounds to approximate the effect.

Thankfully, the power of CSS and various JavaScript libraries have ushered in a new age. It’s now possible to add lighting and shading effects that are nearly on par with what we see in video games.

Today, we’ll share some CSS and JavaScript code snippets that bring these effects to life. Enjoy!

Creativity Now✨(click anywhere) by Anna the Scavenger

Text seems like a natural place to add lighting and shading. But this example takes it to a whole other level. The creative makeup of each letter and cursor-following animation makes this a true work of art. It’s akin to a 3D mobile hanging from your ceiling. Even better: click on the presentation to create an entirely new look.

See the Pen Creativity Now✨(click anywhere) by Anna the Scavenger

Photo Tear by Steve Gardner

Place your cursor on one of the upper corners of a photo, then click-and-drag downwards. You’ll notice the image ripping apart. By itself, that’s a pretty cool effect. But what really sells it is the shading as the perspective shifts. The entire process feels very much authentic.

See the Pen Photo Tear by Steve Gardner

Platonics by Liam Egan

This 3D animation has a stunning liquid effect. A piece of metal twists and morphs its way into various objects. Realistic reflections make it all the more compelling to watch, thanks to WebGL.

See the Pen Platonics by Liam Egan

Beat Burger by Steve Gardner

Nothing like performing a huge drum solo in the spotlight. What? You’ve never been in a famous band? Maybe the next best thing is to play this virtual drumkit, made from a hamburger. You get the sounds, the spotlight and even the shadows. Just don’t get any grease on your new clothes.

See the Pen Beat Burger by Steve Gardner

Monochromatic Yoyo – Pure CSS by Josetxu

Here we have a slinky-like array of pure CSS squares. Their chain-reaction animation is further enhanced by the use of, you guessed it, lighting and shading. Gradients add the illusion of depth, while drop shadow moves along with each layer of the animation.

See the Pen Monochromatic Yoyo – Pure CSS by Josetxu

Art Gallery by isladjan

This virtual art installation is certainly abstract. It features a colorful blob that morphs as your cursor moves across the screen. Rays of light add a touch of realism. However, click on the “Light OFF” button and the entire presentation transforms into a particle explosion.

See the Pen Art Gallery by isladjan

SVG lighting shader by Artem Lvov

With clever implementation, the flashlight effect can be simply amazing. Here it’s used to illuminate a rocky surface. Thanks to SVG, the image looks ultra-realistic. Both the light and perspective shift along with your cursor. It also has the benefit of being safer than walking around in the woods after dark.

See the Pen SVG lighting shader by Artem Lvov

Pacman Concept by Ivan Juarez N.

This PAC-MAN inspired snippet brings the beloved video game into the 3D age. Ghosts travel through an illuminated cube, with sharp rays of light bursting through the maze. Once again, the cursor plays a role, as you can change the scene’s perspective by moving around.

See the Pen Pacman Concept by Ivan Juarez N.

Finishing Touches That Stand Out

It used to be that you needed high-end software to create convincing lighting and shading effects. But, thanks to the advancements in web technologies, similar enhancements can be achieved through code.

The ability to leverage hardware acceleration also plays a key role. Without the power of the graphics processing unit (GPU), these advanced scenes couldn’t run with such fluid motion.

Put together, the results can be stunning. And the examples above might only be scratching the surface of this potential.

Want to check out even more amazing 3D scenes? Visit our CodePen collection to get your fill!