Campus Design System

Appearance

Blur ​

Utilities for controlling the blur effect of an element.

Class NameCSS Equivalent
blur-none--cds-sys-filter-blur: 0;
blur-3xs--cds-sys-filter-blur: 1px;
blur-2xs--cds-sys-filter-blur: 2px;
blur-xs--cds-sys-filter-blur: 4px;
blur-s--cds-sys-filter-blur: 8px;
blur-m--cds-sys-filter-blur: 12px;
blur-l--cds-sys-filter-blur: 16px;
blur-xl--cds-sys-filter-blur: 24px;
blur-2xl--cds-sys-filter-blur: 32px;
blur-3xl--cds-sys-filter-blur: 64px;

Setting the blur filter ​

Control the blur effect on an element using the blur-{amount} utilities.

blur-3xs
blur-2xs
blur-xs
blur-s
blur-m
html
<div class="filter blur-3xs">3xs Blur</div>

❗ Keep in mind

To establish filters like blur, it's essential to commence class declarations with filter.

This action defines a default filter for the element.

css
filter: blur(var(--cds-sys-filter-blur, var(--cds-sys-filter-blur-none))) sepia(var(--cds-sys-filter-sepia, 100%)) sepia(var(--cds-sys-filter-sepia, 100%)) drop-shadow(var(--cds-sys-filter-drop-shadow, 0 0 0 #000)) sepia(var(--cds-sys-filter-sepia, 0%)) hue-rotate(var(--cds-sys-filter-hue-rotate, 0deg)) invert(var(--cds-sys-filter-invert, 0%)) saturate(var(--cds-sys-filter-saturate, 100%)) sepia(var(--cds-sys-filter-sepia, 0%));

Subsequently, varying blur effects can be implemented by assigning classes as outlined on this page.