Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Yumma CSS 3.0 — All new CLI, utilities, and more 🎉

Fill

Controls the filling of SVG elements.

Utility Properties
Error: 429

This example showcases various fill color utilities using the indigo colors from the default color palette.

  • The f-indigo-4 fill utility applies a lighter indigo shade to an SVG element.
  • The f-indigo fill utility applies the base indigo shade to an SVG element.
  • The f-indigo-8 fill utility applies a darker indigo shade to an SVG element.
 
<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div>
    <svg class="d-16 f-indigo-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z"/><path d="M8 14v.5"/><path d="M16 14v.5"/><path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/></svg>
  </div>
  <div>
    <svg class="d-16 f-indigo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z"/><path d="M8 14v.5"/><path d="M16 14v.5"/><path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/></svg>
  </div>
  <div>
    <svg class="d-16 f-indigo-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z"/><path d="M8 14v.5"/><path d="M16 14v.5"/><path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/></svg>
  </div>
</div>

Alternatively, you can apply :hover by using h:f-* utility to override elements and change their values when hovering over them.

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them. 

<div class="f-lead h:f-indigo ..."></div>