Blur

Utility	Properties
f-b-none	filter: blur(0px);
f-b-xs	filter: blur(4px);
f-b-sm	filter: blur(8px);
f-b-md	filter: blur(16px);
f-b-lg	filter: blur(32px);
f-b-xl	filter: blur(64px);

This example showcases various filter blur values: 0px and 4px.

• The f-b-none utility sets the filter property to blur(0px), applying no blur effect.
• The f-b-xs utility sets the filter property to blur(4px), creating a slight blur effect on the element.

<div class="d-g g-16 gtc-2">
  <div class="d-32 p-r rad-1">
    <img class="d-full f-b-none of-c rad-1" src="https://picsum.photos/300?image=872" />
  </div>
  <div class="d-32 p-r rad-1">
    <img class="d-full f-b-xs of-c rad-1" src="https://picsum.photos/300?image=872" />
  </div>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:f-b-*,md:f-b-*, lg:f-b-*, and xxl:f-b-* allows targeting specific utilities in different viewports.

<div class="f-b-none md:f-b-md ..."></div>

Hover modifiers

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

<div class="f-b-none h:f-b-md ..."></div>