Film roll photo filter
Pick a film canister and the photo changes colour, contrast and grain as if it had been developed on that stock.
Settings
Code
<fieldset class="uvq05-fr"><legend>Film</legend><div class="fm"><div class="ph"><svg viewBox="0 0 200 120" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="uvq05-fr-s" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#6fb7e9"/><stop offset="1" stop-color="#ffd9a8"/></linearGradient></defs><rect width="200" height="120" fill="url(#uvq05-fr-s)"/><circle cx="148" cy="36" r="13" fill="#ffd25e"/><path d="M0 78L38 44L62 64L92 30L128 70L152 52L200 82V120H0Z" fill="#4f7a64"/><path d="M0 88L30 70L70 86L110 66L150 84L200 74V120H0Z" fill="#2f5446"/><rect y="94" width="200" height="26" fill="#3d8fc4"/><path d="M20 102h40M90 109h50M150 100h30" stroke="#bfe3f7" stroke-width="1.6" stroke-linecap="round" opacity=".7"/><path d="M118 85h18v9h-18z" fill="#c8432b"/><path d="M115 86l12-9 12 9z" fill="#7a2a1c"/><rect x="124" y="88" width="4" height="6" fill="#ffe2a0"/></svg><i class="tn"></i><svg class="gr" aria-hidden="true"><filter id="uvq05-fr-n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(#uvq05-fr-n)"/></svg></div></div><div class="rl"><label><input type="radio" name="uvq05-fr" checked><span class="cn" style="--b:#f2b134" aria-hidden="true"><i class="ld"></i><i class="cp"></i><span class="bd"><b>400</b></span><i class="cp b"></i></span><span class="nm">Warm</span></label><label><input type="radio" name="uvq05-fr"><span class="cn" style="--b:#2b2b2b" aria-hidden="true"><i class="ld"></i><i class="cp"></i><span class="bd"><b>400</b></span><i class="cp b"></i></span><span class="nm">Black and white</span></label><label><input type="radio" name="uvq05-fr"><span class="cn" style="--b:#2f7d4f" aria-hidden="true"><i class="ld"></i><i class="cp"></i><span class="bd"><b>50</b></span><i class="cp b"></i></span><span class="nm">Slide</span></label><label><input type="radio" name="uvq05-fr"><span class="cn" style="--b:#3a7bd5" aria-hidden="true"><i class="ld"></i><i class="cp"></i><span class="bd"><b>200</b></span><i class="cp b"></i></span><span class="nm">Cool</span></label><label><input type="radio" name="uvq05-fr"><span class="cn" style="--b:#c6352f" aria-hidden="true"><i class="ld"></i><i class="cp"></i><span class="bd"><b>800</b></span><i class="cp b"></i></span><span class="nm">Tungsten</span></label></div></fieldset>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
A filter picker for photo editors and camera apps that shows each look as a real film canister with its ISO on the label. The preview is an inline SVG scene inside a negative strip, and each roll applies CSS filters, a soft-light tint and animated noise grain. The selection is a radio group handled entirely in CSS.
Edit the filter strings to create your own looks, such as a faded summer or a cross-processed slide. Swap the SVG for a real image when you use it in production, and keep the names short so they fit under each canister.