#Filter

These are utility classes that applies filters to elements.

--cirrus-blur: blur(0); filter: var(--cirrus-blur);

--cirrus-blur: blur(.25rem); filter: var(--cirrus-blur);

--cirrus-blur: blur(.5rem); filter: var(--cirrus-blur);

--cirrus-blur: blur(1rem); filter: var(--cirrus-blur);

--cirrus-blur: blur(1.5rem); filter: var(--cirrus-blur);

--cirrus-blur: blur(3rem); filter: var(--cirrus-blur);

#Blur

Blur elements using the blur utility classes. These classes follow the form: u-blur-[none|xs|sm|md|lg|xl].

none

xs

sm

md

lg

xl

<div class="u-blur-none ..."></div>
<div class="u-blur-xs ..."></div>
<div class="u-blur-sm ..."></div>
<div class="u-blur-md ..."></div>
<div class="u-blur-lg ..."></div>
<div class="u-blur-xl ..."></div>

#Responsive

⚠ Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in _configs.scss and create a custom build or enable it in the config in your Sass project.

//_configs.scss
$config: (
    viewports: (
        flags.$BLUR: true,
    )
) !default;

All utility classes mentioned here support viewport based application. All you need to do is add a -<viewport> at the end of the class(es) you are using. For example, use u-blur-sm-md to apply u-blur-sm on medium screens and above.

<div class="u-blur-sm-md">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

The classes specified above are the default utility classes for setting a filter. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        filters: (
            blurs: (
                ...,
                '2xl': (
                    --cirrus-blur: blur(4rem),
                )
            )
        )
    )
) !default;

This would generate the following classes.

.u-blur-2xl {
    --cirrus-blur: blur(4rem);
    filter: var(--cirrus-blur);
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.