Glassmorphism Blur
0 viewshard
Background:
1
2
3
4
5
6
7
8
<div class="glassmorphism-container">
<input type="checkbox" />
<div class="glassmorphism-checkmark">
<div class="frost-overlay"></div>
<div class="glass-checkmark">✓</div>
</div>
<span class="glassmorphism-label">Glassmorphism</span>
</div>Glassmorphism Blur
0 viewshard
Background:
Glassmorphism Blur
1
2
3
4
5
6
7
8
<div class="glassmorphism-container">
<input type="checkbox" />
<div class="glassmorphism-checkmark">
<div class="frost-overlay"></div>
<div class="glass-checkmark">✓</div>
</div>
<span class="glassmorphism-label">Glassmorphism</span>
</div>Was this helpful?
What is inside Glassmorphism Blur
Glassmorphism Blur is a CSS checkbox built with a blurred backdrop, transforms, layered shadows, defined in 65 lines across 10 selectors.
25
CSS properties
10
Selectors
65
Lines of CSS
3
Formats
Techniques used
TransitionsTransformsShadowsBackdrop blurChecked stateFlexbox
CSS properties in this component
align-itemsbackdrop-filterbackgroundborderborder-colorborder-radiusbox-shadowcolorcursordisplayfont-sizefont-weightgapheightinputinsetjustify-contentopacityoverflowpositiontransformtransitionuser-selectwidthz-indexAccessibility check1 to fix
- Built on a native <input> element, so keyboard focus and screen reader semantics work without extra attributes.
- No focus style is defined. Add one before shipping, or keyboard users lose track of position.
Browser support notes
- Backdrop filter needs a -webkit- prefix on older Safari.
These notes are generated by reading this component's own source, so they describe what it actually does rather than what a template says. Copy the code above in HTML, CSS, Tailwind and adapt it freely.