Venetian blinds toggle
The slats of a window blind tilt one after another and let the sun into the room in bands of light.
Settings
Code
<label class="uvq03-bln"><input type="checkbox" role="switch"><span class="wn"><span class="vw"><i class="sn"></i><i class="hl"></i></span><span class="sl"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i></span><i class="rd"></i><i class="rs"></i></span>Natural light</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
This switch is a small window with venetian blinds closed over a view of sky, sun and a green hill. Turning it on tilts each slat in turn with a short delay, so the light opens from top to bottom, the tilt rod twists and a warm glow spreads around the frame. The slats use rotateX in CSS. It fits smart home lighting and daylight settings.
The main color is the sky and the second one is the sun. A pale dawn sky with an orange sun gives a morning look, and a darker blue suits evening modes. Keep the label about light or shade.