Kawaii Ice Cream Input
0 viewsadvanced
Background:
1
2
3
4
5
6
7
<div class="kawaii_ice_cream_input">
<div class="glass-container">
<div class="glass-background"></div>
<input type="text" class="glass-input" placeholder="Kawaii Ice Cream Input..." />
<div class="glass-reflection"></div>
</div>
</div>Kawaii Ice Cream Input
0 viewsadvanced
Background:
1
2
3
4
5
6
7
<div class="kawaii_ice_cream_input">
<div class="glass-container">
<div class="glass-background"></div>
<input type="text" class="glass-input" placeholder="Kawaii Ice Cream Input..." />
<div class="glass-reflection"></div>
</div>
</div>Was this helpful?
What is inside Kawaii Ice Cream Input
Kawaii Ice Cream Input is a CSS button built with gradient fills, a blurred backdrop, layered shadows, defined in 50 lines across 7 selectors.
20
CSS properties
7
Selectors
50
Lines of CSS
3
Formats
Techniques used
TransitionsGradientsShadowsBackdrop blurFocus state
CSS properties in this component
backdrop-filterbackgroundborderborder-colorborder-radiusbox-shadowcolordisplayheightinsetleftmax-widthoutlinepaddingpointer-eventspositionrighttoptransitionwidthAccessibility check
- Built on a native <input> element, so keyboard focus and screen reader semantics work without extra attributes.
- Defines a focus style for keyboard navigation.
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.