Glassmorphism Bubble Checkbox
0 viewsmedium
Background:
1
2
3
4
5
6
<label class="glassmorphism-bubble-container">
<input type="checkbox" />
<div class="glassmorphism-bubble-checkmark">
<div class="glassmorphism-bubble-inner">✓</div>
</div>
</label>Glassmorphism Bubble Checkbox
0 viewsmedium
Background:
Glassmorphism Bubble Checkbox
1
2
3
4
5
6
<label class="glassmorphism-bubble-container">
<input type="checkbox" />
<div class="glassmorphism-bubble-checkmark">
<div class="glassmorphism-bubble-inner">✓</div>
</div>
</label>Was this helpful?
What is inside Glassmorphism Bubble Checkbox
Glassmorphism Bubble Checkbox is a CSS checkbox built with a blurred backdrop, transforms, layered shadows, defined in 44 lines across 6 selectors.
21
CSS properties
6
Selectors
44
Lines of CSS
3
Formats
Techniques used
TransitionsTransformsShadowsBackdrop blurChecked stateFlexbox
CSS properties in this component
align-itemsbackdrop-filterbackgroundborderborder-colorborder-radiusbox-shadowcolorcursordisplayfont-sizegapheightinputjustify-contentopacitypositiontransformtransitionuser-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.