Usefuldevtools.com
☕

Rock Formation Glassmorphic

0 viewshard
Background:
Rock Formation Glassmorphic
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="rock-formation-container">
  <input type="checkbox" id="rock-formation" class="hidden" />
  <label for="rock-formation" class="glass-label">
    <div class="glass-card">
      <div class="rock-layers">
        <div class="layer layer-1"></div>
        <div class="layer layer-2"></div>
        <div class="layer layer-3"></div>
      </div>
      <span class="rock-icon">🗻</span>
    </div>
    <span class="formation-text">Rock Formation</span>
  </label>
</div>
Was this helpful?

What is inside Rock Formation Glassmorphic

Rock Formation Glassmorphic is a CSS checkbox built with gradient fills, a blurred backdrop, transforms, defined in 74 lines across 13 selectors.

25
CSS properties
13
Selectors
74
Lines of CSS
3
Formats

Techniques used

TransitionsTransformsGradientsBackdrop blurChecked stateFlexbox

CSS properties in this component

align-itemsbackdrop-filterbackgroundborderborder-colorborder-radiuscolorcursordisplayfont-sizefont-weightgapheightinputjustify-contentleftopacityoverflowpositionrighttoptransformtransitionwidthz-index

Accessibility 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.