Interactive FAQ
Frequently Asked Questions
If you have any other questions, please email us.
What is Glassmorphism?
Glassmorphism is a design trend that simulates frosted glass, using blur and transparency to create hierarchy and depth.
Device compatibility
Built on Framer's own layout system, so it follows the desktop, tablet and phone breakpoints you already have. No media queries to write.
Color customization
Hover and active colours are separate properties on each row. The glass effect is neutral, so it sits on any palette without retuning.
Technology stack
The glass effect is neutral and works with any color palette. Here are some examples of background colors that pair well:
React 18
Tailwind CSS v4
Framer Motion
Lucide Icons
TypeScript
CSS code examples
The frosted panel is a blurred background with a light border and a soft shadow. The block below is the equivalent in plain CSS, if you want to match it elsewhere.
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
Interactive FAQ
Frequently Asked Questions
If you have any other questions, please email us.
What is Glassmorphism?
Glassmorphism is a design trend that simulates frosted glass, using blur and transparency to create hierarchy and depth.
Device compatibility
Built on Framer's own layout system, so it follows the desktop, tablet and phone breakpoints you already have. No media queries to write.
Color customization
Hover and active colours are separate properties on each row. The glass effect is neutral, so it sits on any palette without retuning.
Technology stack
The glass effect is neutral and works with any color palette. Here are some examples of background colors that pair well:
React 18
Tailwind CSS v4
Framer Motion
Lucide Icons
TypeScript
CSS code examples
The frosted panel is a blurred background with a light border and a soft shadow. The block below is the equivalent in plain CSS, if you want to match it elsewhere.
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
Interactive FAQ
Frequently Asked Questions
If you have any other questions, please email us.
What is Glassmorphism?
Glassmorphism is a design trend that simulates frosted glass, using blur and transparency to create hierarchy and depth.
Device compatibility
Built on Framer's own layout system, so it follows the desktop, tablet and phone breakpoints you already have. No media queries to write.
Color customization
Hover and active colours are separate properties on each row. The glass effect is neutral, so it sits on any palette without retuning.
Technology stack
The glass effect is neutral and works with any color palette. Here are some examples of background colors that pair well:
React 18
Tailwind CSS v4
Framer Motion
Lucide Icons
TypeScript
CSS code examples
The frosted panel is a blurred background with a light border and a soft shadow. The block below is the equivalent in plain CSS, if you want to match it elsewhere.
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
Experience Better UX Design
A glassmorphism form that stays readable on any photograph. Every field, label and colour is a property in the panel.
Experience Better UX Design
A glassmorphism form that stays readable on any photograph. Every field, label and colour is a property in the panel.
Experience Better UX Design
A glassmorphism form that stays readable on any photograph. Every field, label and colour is a property in the panel.
New Feature
Craft Stunning User Interfaces
Six glassmorphism components that share one frosted panel: a blurred background, a light border and a soft shadow. Put two of them on a page and they read as one system.
Modern and Practical UI Kit for All Projects
The perfect blend of contemporary design and real usability for web apps, mobile apps, and dashboard interfaces.
The Ideal UI Kit for Versatile Applications
Impeccable mix of modern design and practical functionality in web applications, mobile apps, and dashboard interfaces.
Modern Design with Guaranteed Usability
Perfect for web apps, mobile, and dashboards – the ideal balance of aesthetics and practicality.
New Feature
Craft Stunning User Interfaces
Six glassmorphism components that share one frosted panel: a blurred background, a light border and a soft shadow. Put two of them on a page and they read as one system.
Modern and Practical UI Kit for All Projects
The perfect blend of contemporary design and real usability for web apps, mobile apps, and dashboard interfaces.
The Ideal UI Kit for Versatile Applications
Impeccable mix of modern design and practical functionality in web applications, mobile apps, and dashboard interfaces.
Modern Design with Guaranteed Usability
Perfect for web apps, mobile, and dashboards – the ideal balance of aesthetics and practicality.
New Feature
Craft Stunning User Interfaces
Six glassmorphism components that share one frosted panel: a blurred background, a light border and a soft shadow. Put two of them on a page and they read as one system.
Modern and Practical UI Kit for All Projects
The perfect blend of contemporary design and real usability for web apps, mobile apps, and dashboard interfaces.
The Ideal UI Kit for Versatile Applications
Impeccable mix of modern design and practical functionality in web applications, mobile apps, and dashboard interfaces.
Modern Design with Guaranteed Usability
Perfect for web apps, mobile, and dashboards – the ideal balance of aesthetics and practicality.
Contact us
We'd love to hear from you. Please fill out this form, and we'll reply soon.
Contact us by email, and we will respond shortly.
hello@yourstudio.com
Phone
Call us on weekdays from 9 AM to 5 PM.
+1 (555) 000-0000
Office
Visit us at our headquarters.
123 Example Street, Amsterdam, Netherlands
Contact us
We'd love to hear from you. Please fill out this form, and we'll reply soon.
Contact us by email, and we will respond shortly.
hello@yourstudio.com
Phone
Call us on weekdays from 9 AM to 5 PM.
+1 (555) 000-0000
Office
Visit us at our headquarters.
123 Example Street, Amsterdam, Netherlands
Contact us
We'd love to hear from you. Please fill out this form, and we'll reply soon.
Contact us by email, and we will respond shortly.
hello@yourstudio.com
Phone
Call us on weekdays from 9 AM to 5 PM.
+1 (555) 000-0000
Office
Visit us at our headquarters.
123 Example Street, Amsterdam, Netherlands
✦
Welcome back
Log in to your account to continue.
Or continue with
GitHub
Don't have an account?
Register here!
✦
Welcome back
Log in to your account to continue.
Or continue with
GitHub
Don't have an account?
Register here!