8 CSS & JavaScript Snippets for Creating Reflection & Refraction Effects

The simple act of light reflecting off a surface or refracting through it can produce stunning images. We see it every day in the physical world. This could be the way the sun peeks through your office window or the light hitting the mirror at just the right angle. It’s like little science experiments taking place right in front of us.

Thanks to the latest CSS and JavaScript technologies, these effects fascinate web users. Everything from the relatively simple details of reflection to the curved refractions of light appear on our screens. Even highly realistic behaviors are possible.

Today, we are going to bring you some notable blade snippets that bring mirror, reflection and refraction effects to life. lets take alook!

bonsai animation by kamil

This gently moving bonsai provides a soothing sensation that contrasts with the serious technology that makes it work. Uses SVG and the GSAP animation library to create a beautiful watercolor reflection effect.

Watch the animation of Pen Bonsai by Kamil

PBR . reflection by ycw

Here is a very unique extract that has multiple effects. First, there is a rotating shape that hovers in front of a mirror-like surface. Note the bright reflection underneath as well. The lighting and shading are great. You can also use your mouse or touch to change perspective.

Watch the reflection of the PBR pen by ycw

Reversed light orb pointer movement by Diana Low

This excerpt is proof that mirror effects can be applied in unconventional ways. Two brightly colored orbs appear on a black background. Move the cursor to control left (white), while the other reflects your movements. Dragging these orbs all over the screen side by side is way more fun than it should be!

Watch the Reverse Light Orb Pointer Movement by Diana Low

GLSL: refracted rays by Liam Egan

The color and texture of these animations are enchanting. Rows on rows of balls move towards you, while the position of the pointer changes the refractive index. Appearance ranges from glassy to old school TV static. HTML 5 canvas and JavaScript are used to create super smooth animation.

Watch GLSL Pen: Refracted Rays by Liam Egan

pure CSS text mirror by Tim

Inverted text is surprisingly easy to implement. With just a few dozen lines of pure CSS, you can achieve an engaging effect that is sure to grab the user’s attention. The secret lies in the CSS transform property, which turns the mirror upside down. From there, a color gradient is used to create a more realistic look.

Watch Pen Pure css text mirror by Tim

text broken by Juan Fuentes

Add some custom text and this snippet will make it look like it’s being projected through a crystal ball. Pointer movements change the perspective and size of the effect. When combined with the colorful background, the entire presentation has the feel of the 60s.

See Broken Pencil Text by Juan Fuentes

phone reflection by Luke Lincoln

Check out this take on a modern obsession – staring softly at your phone. Click on the phone and the simulated text will slowly reflect on the subject’s body. It’s similar to what you might see in a dark cinema.

Watch Mirroring the Phone with a Pen by Luke Lincoln

Three.js . reflection by seanwasere

Speaking of barebones business, this virtual gamepad is something to watch. 3D reflective balls that roll as light bounces off them. You can also change the scene’s perspective, and add more cool special effects to the special effects. If astronauts were playing games in space, this might be it.

See Three.js Pen Reflections by seanwasere

Adding a new perspective to the web

As amazing as it may sound, the developers are crafting some amazing mirror, reflection, and refraction effects for the web. Not only do they look amazing, but many of them also take advantage of physics to add a layer of realism as well.

Want to see more top-notch snippets? Take a peek at our CodePen collection!

Leave a Comment