Screw-on lens filters
Screw glass filters onto the lens; they stack up and the image adds the effect of each one.
Settings
Code
<div class="uvq05-ln"><div class="lens" aria-hidden="true"><div class="gw"><div class="f1"><div class="f2"><div class="f3"><div class="f4"><svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="uvq05-ln-s" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3f8fd8"/><stop offset=".62" stop-color="#cbe8f7"/></linearGradient></defs><rect width="100" height="100" fill="url(#uvq05-ln-s)"/><circle cx="70" cy="32" r="9" fill="#fff4c2"/><g fill="#fff" opacity=".92"><ellipse cx="28" cy="27" rx="14" ry="5"/><ellipse cx="37" cy="23" rx="9" ry="5"/></g><rect y="62" width="100" height="38" fill="#1f6fa8"/><path d="M0 62h100" stroke="#e9f6ff" stroke-width=".8"/><path d="M8 72h22M44 82h30M70 70h18M16 90h28" stroke="#9fd2f0" stroke-width="1.2" stroke-linecap="round" opacity=".6"/><path d="M47 60V35l14 23z" fill="#fff"/><path d="M45 61h20l-4 5H48z" fill="#c8432b"/></svg></div></div></div></div><i class="gl"></i></div><i class="rg rg1" style="--t:#5b6b8a"></i><i class="rg rg2" style="--t:#3a3a3a"></i><i class="rg rg3" style="--t:#f2a65a"></i><i class="rg rg4" style="--t:#dfe6ee"></i><span class="mm">ø52</span></div><fieldset><legend>Lens filters</legend><label><input type="checkbox" checked><span class="dc" style="--t:#5b6b8a"></span><span class="nm">Polariser</span></label><label><input type="checkbox"><span class="dc" style="--t:#3a3a3a"></span><span class="nm">Neutral density</span></label><label><input type="checkbox"><span class="dc" style="--t:#f2a65a"></span><span class="nm">Warming</span></label><label><input type="checkbox"><span class="dc" style="--t:#dfe6ee"></span><span class="nm">Diffuser</span></label><p class="ct"><span>Filters mounted:</span> <span class="n"></span></p></fieldset></div>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 Filters
See all FiltersWhere to use it
Photographers stack polarisers, ND and warming filters on their lenses, and this control does the same with checkboxes. Each filter screws on as a knurled ring with a short spin, and the view through the glass combines nested CSS filters, so two or three can work together. Use it in photo editors, camera apps or lessons about optics.
Change the brass accent and the barrel colour with the colour controls, and edit the list to add a mist filter or a red filter for black and white. Replace the SVG view with your own photo when you ship it.