Holographic Prism Checkbox
0 viewshard
Background:
1
2
3
4
5
6
7
<label class="holographic-prism-container">
<input type="checkbox" />
<div class="holographic-prism-checkmark">
<div class="holographic-prism-face"></div>
<div class="holographic-prism-icon">◆</div>
</div>
</label>Holographic Prism Checkbox
0 viewshard
Background:
Holographic Prism Checkbox
1
2
3
4
5
6
7
<label class="holographic-prism-container">
<input type="checkbox" />
<div class="holographic-prism-checkmark">
<div class="holographic-prism-face"></div>
<div class="holographic-prism-icon">◆</div>
</div>
</label>Was this helpful?
What is inside Holographic Prism Checkbox
Holographic Prism Checkbox is a CSS checkbox built with a keyframe animation, gradient fills, a blurred backdrop, defined in 60 lines across 8 selectors.
25
CSS properties
8
Selectors
60
Lines of CSS
3
Formats
Techniques used
Keyframe animationTransitionsTransformsGradientsFiltersBackdrop blurChecked stateFlexbox
Animations defined: holographic-shimmerholographic-active
CSS properties in this component
align-itemsanimationbackdrop-filterbackgroundbackground-positionbackground-sizeborder-radiuscolorcursordisplayfilterfont-sizegapheightinputinsetjustify-contentopacityoverflowpositiontransformtransitionuser-selectwidthz-indexAccessibility check2 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.
- Animates without a prefers-reduced-motion guard. Wrap the animation in that query if motion sensitivity matters to your audience.
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.