Morphing Fill Checkbox

A morphing fill checkbox built with pure HTML and CSS that transitions the checkbox indicator with a smooth shape and fill transformation. It enhances selection feedback and modern form interaction clarity without requiring JavaScript.

Usage

Use this component when interfaces require animated checkbox transitions, such as task lists, settings panels, feature toggles, or preference controls that benefit from visually engaging state changes.

Implementation

The effect is implemented using CSS :checked selectors combined with transform, scale, and background transitions, allowing the checkbox indicator to morph and fill smoothly when selected.

HTML

<label class="check-morph">
  <input type="checkbox" />
  <span class="check-morph__box"></span>
  <span class="check-morph__text">Enable</span>
</label>

<label class="check-morph">
  <input type="checkbox" />
  <span class="check-morph__box"></span>
  <span class="check-morph__text">Enable</span>
</label>

CSS

.check-morph {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  color: #111827;
}

.check-morph input {
  display: none;
}

.check-morph__box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid #6366f1;
  position: relative;
  overflow: hidden;
}

.check-morph__box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #6366f1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 220ms ease;
}

.check-morph input:checked + .check-morph__box::before {
  transform: scaleY(1);
}

.check-morph__text {
  user-select: none;
}

@media (prefers-color-scheme: dark) {
  .check-morph {
    color: #e5e7eb;
  }
}

.check-morph {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  color: #111827;
}

.check-morph input {
  display: none;
}

.check-morph__box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid #6366f1;
  position: relative;
  overflow: hidden;
}

.check-morph__box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #6366f1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 220ms ease;
}

.check-morph input:checked + .check-morph__box::before {
  transform: scaleY(1);
}

.check-morph__text {
  user-select: none;
}

@media (prefers-color-scheme: dark) {
  .check-morph {
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses morphing fill animation styling
• Enhances checkbox interaction visibility
• Fully responsive across breakpoints
• Suitable for forms and task interfaces
• Easy to customize fill color and animation timing

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.