The simple act of light reflecting off of or refracting through a surface can produce stunning visuals. We see it every day in the physical world. It might be the way the sun peeks through your office window or light hitting a mirror at just the right angle. They’re like little science experiments that take place right in front of us.
Thanks to the latest CSS and JavaScript techniques, these effects are also dazzling web users. Everything from relatively simple reflection details to light-bending refractions is popping up on our screens. Even highly-realistic behaviors are possible.
Today, we’ll introduce you to some outstanding code snippets that bring mirror, reflection, and refraction effects to life. Let’s take a look!
Bonsai animation by Kamil
This gently-animated bonsai provides a calming feel that belies the serious technology that makes it work. It utilizes SVG and the GSAP animation library to create a lovely water reflection effect.
See the Pen Bonsai animation by Kamil
PBR Reflection by ycw
Here’s a very unique snippet that features multiple effects. First, there’s a rotating shape that hovers in front of a mirror-like surface. Notice the shiny reflection underneath as well. The lighting and shading are gorgeous. You can also use your mouse or touch to change the perspective.
See the Pen PBR Reflection by ycw
Mirrored Light Orb Cursor Movement by Diana Le
This snippet is proof that mirror effects can be applied in unconventional ways. Two brightly-colored orbs appear against a black background. Move your cursor to take control of the left (white) one, while the other mirrors your movements. Dragging these orbs all over the screen in tandem is more fun than it should be!
See the Pen Mirrored Light Orb Cursor Movement by Diana Le
GLSL: Refracted rays by Liam Egan
The color and texture of this animation are mesmerizing. Rows upon rows of spheres move toward you, while your cursor position changes the refraction index. The look ranges from glassy to old-school television static. HTML 5 canvas and JavaScript are used to create the ultra-smooth movement.
See the Pen GLSL: Refracted rays by Liam Egan
Pure CSS text mirror by Tim
Mirrored text is surprisingly easy to implement. With just a few dozen lines of pure CSS, you can achieve an attractive effect that is sure to grab a user’s attention. The secret is in the CSS transform property, which flips the mirrored version upside down. From there, a gradient is used to create a more realistic look.
See the Pen Pure css text mirror by Tim
Text Refraction by Juan Fuentes
Add some custom text and this snippet will make it look as if it’s being viewed through a crystal ball. Cursor movements change both the perspective and size of the effect. When combined with the colorful background, the whole presentation has a 1960s vibe to it.
See the Pen Text Refraction by Juan Fuentes
Phone Reflection by Luke Lincoln
Check out this abstract take on a modern obsession – staring blankly into your phone. Click on the phone and simulated text reflects slowly up the subject’s body. It’s similar to what you might see in a darkened movie theatre.
See the Pen Phone Reflection by luke lincoln
Three.js Reflection by seanwasere
Speaking of abstract works, this virtual game board is something to behold. Mirrored 3D balls roll around as light bounces off of them. You can also change the perspective of the scene, adding even more intrigue to the outstanding special effects. If astronauts play games in space, this might be the one.
See the Pen Three.js Reflection by seanwasere
Adding a New Perspective to the Web
Amazing as it may seem, developers are crafting some seriously stunning mirror, reflection, and refraction effects for the web. Not only do they look incredible, but many also make great use of physics to add a layer of realism as well.
Want to see even more top-notch snippets? Take a peek at our CodePen collection!
