Glassmorphism Generator
Create custom glassmorphism effects for free. Adjust blur, refraction, depth and copy the generated CSS to use in your projects.
Settings
9
0.09
9
.glass-card {
width: 240px;
height: 360px;
background: rgba(255, 255, 255, 0.09);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
inset 0 0 18px 9px rgba(255, 255, 255, 0.9);
position: relative;
overflow: hidden;
}
.glass-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.8),
transparent
);
}
.glass-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.8),
transparent,
rgba(255, 255, 255, 0.3)
);
}What is Glassmorphism?
Glassmorphism is a design trend that creates elements with a translucent and blurred glass effect, creating a sense of depth and modernity. This effect is popular in modern interfaces and gives an elegant look to your projects.
Glassmorphism Features
- •Translucent glass effect with background blur
- •Subtle and semi-transparent borders
- •Creates sense of depth and layers
- •Ideal for cards, modals and modern panels
- •Works well with colored or gradient backgrounds
Usage Tips
- •Adjust blur to control the sharpness of the effect
- •Refraction controls the transparency of the element
- •Depth adjusts the size of the element
- •Use colored backgrounds for better visualization
- •Combine with shadows for more depth