Glass Morphism Checkbox
0 viewsmedium
Background:
1
2
3
4
5
6
7
8
<label class="glass-container">
<input type="checkbox" />
<div class="glass-checkmark">
<svg viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
</div>
</label>Glass Morphism Checkbox
0 viewsmedium
Background:
Glass Morphism Checkbox
1
2
3
4
5
6
7
8
<label class="glass-container">
<input type="checkbox" />
<div class="glass-checkmark">
<svg viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
</div>
</label>Was this helpful?
What is inside Glass Morphism Checkbox
Glass Morphism Checkbox is a CSS checkbox built with a blurred backdrop, transforms, layered shadows, defined in 42 lines across 6 selectors.
18
CSS properties
6
Selectors
42
Lines of CSS
3
Formats
Techniques used
TransitionsTransformsShadowsBackdrop blurChecked state
CSS properties in this component
backdrop-filterbackgroundborderborder-colorborder-radiusbox-shadowcursordisplayfillheightinputmarginopacitypositiontransformtransitionuser-selectwidthAccessibility check1 to fix
- Built on a native <label> 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.