Interective 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);
}
Interective 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);
}
Interective FAQ
Frequently Asked Questions
If you have any other questions, please email us.
What's Glass ?
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);
}