How to Create a Stunning Refracted Glass Effect in Spline

Hey everyone! Today, I’m showing you how to create a super cool refracted glass effect in Spline. Whether you're prototyping interactive websites, posters, or exploring futuristic design ideas, this effect can be a total game-changer.

If you want to skip the full tutorial, I’ll leave a clonable project link at the end. But for those ready to dive in and learn the steps, let’s get into it!

Inspiration Behind the Effect

Before we start, big shoutout to two incredible designers:

• Jordan Gilroy – an amazing web designer and developer who created a beautiful neocultural design featuring elegant glass effects. Imagine this on a hero header… so much potential!
• Christian BD – the creator behind a refracted glass project on Spline (check it out on Reddit). Go give him a follow on Spline; his work is top-notch.

These examples show how versatile and impressive this effect can be. Now, let’s make it ourselves!

Step 1: Setting Up Your Project in Spline

1. Open Spline and start a new project.
2. Remove the default objects but keep the Directional Light.
3. Change the background color to something lighter so you can see your design better.

Step 2: Building the Core Shape

The refracted glass effect uses cylinders arranged in a visually appealing pattern. Don’t worry; it’s much easier than it sounds.

1. Add a Cylinder: Go to the object menu and bring in a cylinder.
2. Hollow Out the Center:
   • Select the cylinder.
   • Find the Hollow option on the right panel and drag the slider until it’s thin (like a hollow tube or penne pasta).
3. Clone the Cylinder:
   • Click Clone at the bottom.
   • Choose Linear as the clone type.
   • Set the Count to 20.
   • Adjust the spacing to match the cylinder’s width (e.g., 67 units).

This creates a grid of hollow cylinders that will form the base of our glass effect. You can experiment with rotation or randomness for different patterns.

Step 3: Applying Materials and Effects

This is where the magic happens! We’ll apply materials and tweak settings to achieve that sleek glass look.

1. Basic Material Settings:

• Select the cylinder (it applies to all clones).
• Go to the Material Panel and change the Color to white.
• Under Lighting, select Physical.

2. Adjust Reflectivity and Texture:

• Lower the Roughness to give the surface a smooth, glassy look.
• Play with the Reflectivity and Metalness sliders until you like the result.

3. Adding a Texture:

• Add an Image Layer in the Material panel.
• Use any textured image (you can grab free ones from Unsplash or Freepik).
• Apply the image and adjust the Bump Map to create artificial roughness for added depth.

Pro Tip: Small tweaks to bump map intensity can make a huge difference in realism.

4. Adding Noise for Extra Detail:

• Add a Noise Layer in the material.
• Set it to Simplex Fractal and adjust the scale (1, 1, 1).
• Change the blend mode to Overlay and reduce the opacity to around 50%.

This creates a subtle grainy effect that adds texture without overpowering the glassiness.

Step 4: Enhancing with Depth and Shine

Now let’s add depth and that final shine:

1. Add a Fresnel Layer:
   • This layer adds a nice reflective punch to the edges.
   • Blend it with Overlay for a more dynamic look.
2. Adjust the Blur and Refraction:
   • Increase Blur slightly to enhance the frosted look.
   • Play with Refraction and Thickness to find the right balance.

Step 5: Animation (Optional but Awesome)

To make the design come alive, let’s animate the cylinders:

1. Select the cylinder grid.
2. In the Base State, set the Rotation to 0.
3. Create a New State and set the Rotation to 360 degrees.
4. Add a Transition (e.g., 20 seconds) with a Loop set to Ping Pong.

Hit Play to see the cylinders spin seamlessly. Imagine layering this with text or images on a website… stunning!

Step 6: Adding Background and Final Touches

1. Import a background image (e.g., from Unsplash).
2. Place it behind your cylinders to add contrast.
3. Fine-tune the glass effect:
   • Adjust thickness, blur, and color settings until everything looks perfect.

Applications and Ideas

The possibilities for this refracted glass effect are endless:

• Interactive Hero Headers: Perfect for websites.
• Posters and UI Designs: Add depth and movement to visual designs.
• Future Tech Concepts: Interactive posters or installations.

This is just the start! Spend time tweaking small details—it’s those little touches that bring your design to life.

Final Thoughts

We created a stunning refracted glass effect in Spline in no time. The key is experimenting with the tools and pushing your creativity. If you’d rather skip the build, here’s a clonable project for you to explore and customize.

If you enjoyed this tutorial, subscribe for more Spline content. I’ll be sharing tips, tricks, and immersive design ideas regularly.

Leave any questions or comments below—I’d love to see what you create. Let’s get building!

Cheers! 🎉