How To Create The Glassmorphism Effect
Duration: 15:22
Learn how to create a glassmorphism effect in SVGator.
Step 1 - Prepare Your Workspace
For this project, focus on the trail maps icon, which has a few layers: a colored map background, a map glass background which is the glass panel, a trail group representing the road, and a pin location icon.
Step 2 - Set Up The Background
The key to the glassmorphism effect is the map glass background layer. This layer must have a white gradient with opacity ranging from 80 percent to 10 percent to create that translucent look. It also has a gradient stroke to give the glass panel dimension and shine. Make sure this gradient and opacity setup is applied before you move forward.
Step 3 - Duplicate Layers And Create The Blur Effect
Duplicate your map glass background by copying and pasting it, then do the same with the colored map layer. Temporarily hide the duplicated colored map layer to keep things clean.Select both the original colored map and the map glass background and create a clipping path. Rename this clipped group to “blur effect” to keep your project organized. Inside this group, select the colored map layer and add a blur filter from the filters menu. Adjust the blur’s horizontal and vertical spread values to around 4 each to get a subtle blur that enhances the glass look without overpowering it.
Step 4 - Fix The Missing Shape Issue
You will notice your glass effect is not fully visible because part of the shape is missing. To fix this, duplicate the map glass background again and place it on top of your colored map layer, behind the blur effect group. Group these layers together and name this group something like “map group” to keep things tidy. This layering ensures your glass panel looks complete without losing the blur effect.
Step 5 - Create A Clipping Path And Modify The Mask
Select the map glass background and the colored map, then create another clipping path, naming this group “colored background.” To fine-tune the mask, convert the map glass background into a path so you can edit its nodes. Switch to the node tool (shortcut A) and adjust the nodes by dragging the bottom nodes upwards to reveal the colored background shape properly. Carefully align nodes so the mask fits perfectly with your glass panel, adjusting points left or right and up or down as needed for a clean look.
Step 6 - Animate Panel Movement And Scale
Select all layers that make up the glass panel: the map group, the map glass background, and the color background inside the clipping path. Extend your animation timeline and add position keyframes starting at 0.5 seconds. Move the group up slightly at 1 second, then down at 1.5 seconds, repeating this up and down motion for a few cycles until 3.5 seconds. Add easing (ease now quad) to create a smooth bounce effect. Next, add a scale animation from 0 to 0.5 seconds that scales the panel from 1.5 to 1.25 and back to 1.5, adding ease-in for a natural feeling. Group the entire animation.
Step 7 - Prepare For Export
Save your project to avoid losing any work. Now you are ready to export your animated SVG for the web. In the export settings, set the animation to start on mouse over. For the mouse-out event, you will export two versions: one set to reset and another set to reverse.
Step 8 - Export, Test, And Refine
Export both versions of your animation and test them in your browser. Observe how the reset version ends abruptly when the mouse leaves, while the reverse version smoothly transitions back to the beginning. This subtle difference greatly improves user interaction and visual polish. You can tweak the blur values, animation timing, and easing curves as needed to fit your design preferences.This technique can be extended to other illustrations, allowing you to replicate the process.
Still have questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can!
Tutorials to help you out:
