HTML + CSSFilters

Fabric swatch book filter

Pinked fabric swatches with real textures: linen, wool, corduroy, silk, denim and cotton, ready to tick.

Settings

Main color#c2410c

Secondary color#fff7ed

Size16px

Speed1x

Text

Code

index.html

<fieldset class="uvq05-fb"><legend>Fabric</legend><div class="gr"><label style="--r:-3deg"><input type="checkbox"><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Linen</span></label><label style="--r:2deg"><input type="checkbox" checked><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Wool</span></label><label style="--r:-2deg"><input type="checkbox"><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Corduroy</span></label><label style="--r:3deg"><input type="checkbox" checked><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Silk</span></label><label style="--r:-1deg"><input type="checkbox"><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Denim</span></label><label style="--r:2deg"><input type="checkbox"><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Cotton</span></label></div><p class="ct"><span>Fabrics chosen:</span> <span class="n"></span></p></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.

Markdown version with all the code, for AI assistants

More in Filters

See all Filters

Filter chips

FiltersReact + Motion

Segmented control

FiltersReact + Motion

Multi-select dropdown

FiltersReact + Motion

Sliding pill filter chips

FiltersHTML + CSS

Centre-fill filter chips

FiltersHTML + CSS

Gradient border chips

FiltersHTML + CSS

Checkmark filter chips

FiltersHTML + CSS

Removable chips with X

FiltersHTML + CSS

Where to use it

Fashion, upholstery and furniture shops often filter by material, and a swatch says more than a word. Each square is clipped with a pinking-shears polygon and textured with layered CSS gradients for weave, knit, ribs or sheen. Selected swatches lift with a slight tilt, show white stitching and get a small ticked label.

The first colour marks the tick and the selected names, the second colours the label card. Edit the colours and gradients of each fabric in the code to match your stock, and keep the names short for small screens.