HTML + CSSToggles
Liquid toggle
The knob stretches like a drop of liquid as it crosses the track, then pulls back together.
Settings
16px
1x
Code
<label class="uv-tlq"><input type="checkbox" role="switch"><span class="tr"><svg width="0" height="0" aria-hidden="true"><filter id="uv-tlq-goo"><feGaussianBlur in="SourceGraphic" stdDeviation="3"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -9"/></filter></svg><span class="gg"><i class="a"></i><i class="b"></i></span></span>Notifications</label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toggles
See all TogglesWhere to use it
Two white circles move at slightly different speeds under an SVG gooey filter, so in motion they melt into one stretched drop and snap back into a round knob at the end. The track fills with the main color at the same time. It brings a soft, organic feel to notification settings, music apps and wellness products.
The filter is defined inside the component, so there is nothing to add to the page. Speed changes how long the stretch lasts; at higher speeds it looks like a quick splash, at lower speeds like honey.