HTML + CSSFilters
Chili heat level filter
Five chillies light up from yellow to deep red to show how much spice you can handle.
Settings
16px
1x
Code
<fieldset class="uvq05-ch"><legend>Maximum heat</legend><div class="row"><label style="--h:#f7c548"><input type="radio" name="uvq05-ch" aria-label="Mild"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:#f59e0b"><input type="radio" name="uvq05-ch" aria-label="Medium"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:#f06b1f"><input type="radio" name="uvq05-ch" aria-label="Spicy" checked><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:var(--c1)"><input type="radio" name="uvq05-ch" aria-label="Very hot"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:#a3121f"><input type="radio" name="uvq05-ch" aria-label="Fire"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label></div><div class="bar" aria-hidden="true"><i></i></div><p class="lv" aria-hidden="true"><span>Mild</span><span>Medium</span><span>Spicy</span><span>Very hot</span><span>Fire</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.
More in Filters
See all FiltersWhere to use it
A rating-style filter for menus and food delivery where the scale is heat instead of stars. Each chilli is an inline SVG whose colour comes from a CSS variable, the radio group fills every pepper up to the chosen one, and a gradient bar and a short word confirm the level. At the top level the peppers glow.
The main colour sets the hottest pepper and the second one starts the bar, so you can go from mild green to fiery red. Rename the levels to match your kitchen, or reuse the pattern with other icons for sweetness or strength.