---
title: "Glass Navigation — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Veronica G · Navigation. Key Visual Features Turbulence and Displacement Uses SVG filters to create an abstract, rippled texture (like warped glass)."
canonical: "https://framer.elliotli.dev/component/glass-navigation"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Glass Navigation

# Glass Navigation

[View on Framer](https://framer.com/marketplace/components/glass-navigation/?via=elliot-li)

![Glass Navigation preview image 1](https://framer.elliotli.dev/og/component/glass-navigation/61b55771dc53b3fc/1600x1200.jpg)

## Summary

Key Visual Features Turbulence and Displacement Uses SVG filters to create an abstract, rippled texture (like warped glass).

## Description

## Key Visual Features

1.  **Turbulence and Displacement**
    
    -   Uses SVG filters to create an abstract, rippled texture (like warped glass).
        
    -   The ripples shift based on customizable turbulence settings.
        
2.  **Refraction and Chromatic Aberration (Optional)**
    
    -   Adds a light-bending effect using displacement maps.
        
    -   You can also simulate color separation around edges, like you see through prisms or real glass.
        
3.  **Lighting Overlay**
    
    -   Adds a subtle light gradient from one corner, creating depth and realism.
        
    -   The direction and color of the light are customizable.
        
4.  **Noise Fallback for Safari**
    
    -   Because Safari doesn’t support SVG filters on HTML elements, a static noise texture is used instead for compatibility.
        
    -   It still gives a textured feel without breaking the design.
        
5.  **Border (Optional)**
    
    -   A subtle border can be added around the effect to enhance the glass pane look.
        
    -   You can customize its color, width, and whether it's shown.
        

## Customization

All major visual elements can be fine-tuned from Framer’s visual controls:

-   Blur amount
    
-   Opacity and color of the background
    
-   Light direction and color
    
-   Texture intensity and detail
    
-   Border radius and thickness
    
-   Toggle features like chromatic aberration, noise, and displacement
    

## Ideal Use Case

This is perfect for:

-   **Sticky navigation bars**
    
-   **Glassmorphism UI layouts**
    
-   Designers who want to create an upscale, modern feel in their Framer projects
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4678

## Details

- **Author**: Veronica G
- **Price**: $10.00
- **Published**: 2025-08-14
- **Updated**: 2025-08-14
- **Added**: 2025-08-07
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation