CSSFrontend
CSS Glassmorphism Generator
Generate modern frosted glass effects with backdrop-blur, translucency, and borders.
tool id:glassmorphism
HEX
#2E6F68
RGB
rgb(46, 111, 104)
HSL
hsl(174, 41%, 31%)
accessibility & wcag contrast
White Text on Background5.85:1 ratio (AA Pass ✓)
Black Text on Background3.59:1 ratio (Fail ✗)
tonal scale palette
Step 1hsl(174, 41%, 95%)
Step 2hsl(174, 41%, 85%)
Step 3hsl(174, 41%, 70%)
Step 4hsl(174, 41%, 55%)
Step 5hsl(174, 41%, 40%)
Step 6hsl(174, 41%, 25%)
Step 7hsl(174, 41%, 10%)
related tools in Frontend
view all Frontend→Color Palette & HEX / RGB / HSL Converter
Color picker, format conversions, WCAG contrast checker, and harmonious palette generator.
Open Tool→
CSS Box Shadow Generator
Interactive visual box-shadow builder with multiple layers, blur, spread, inset, and CSS export.
Open Tool→
Tailwind CSS Utility Builder
Visual builder for padding, margin, border, typography, flex, and grid into Tailwind classes.
Open Tool→