Backdrop-blur Utility

[crftwrk]

Glass effects using backdrop-filter are widely used in modern UI design. Happy to see this already in the v6 dialog/offcanvas backdrop. While Bootstrap provides the Utilities API to generate custom utilities, it may now be time to include a backdrop-blur utility by default.

I'm currently using this (v5), which results in a small CSS output:

Demo: https://codepen.io/craftwerkberlin/pen/bNwqLMN

// Add a custom backdrop-blur utility
$utilities: map-merge(
  $utilities,
  (
    "blur": (
      property: (
        backdrop-filter,
        -webkit-backdrop-filter
      ),
      class: bd-blur,
      values: (
        1: blur(5px) saturate(180%),
        2: blur(10px) saturate(180%),
        3: blur(15px) saturate(180%),
        4: blur(20px) saturate(180%),
        5: blur(25px) saturate(180%),
      )
    )
  )
);

This creates a new utility bd-blur-{1-5} that can be used in combination with other (v6) bg utilities (color, opacity), for example bg-white fg-white bg-10 bd-blur-5. It can be used in sticky navbars, card overlays, or anywhere one layer overlaps another.

If this is of interest, I’d be happy to fine-tune it and work on a PR. Let me know what you think.

[pricop]

Your utility doesn't just blur, it also applies a strong saturate() filter, which feels very opinionated (it increases the colors underneath quite a lot, and could hurt accessibility), so that particular bit would have to disappear if this is to be introduced, as some of us have generated additional filter utilities, for example bd-filter-saturate, bd-filter-invert, bd-filter-grayscale, etc.

I'd love to see backdrop blur being added out of the box, but the main problem that I currently see is that the CSS size of Bootstrap v6 currently sits at 275kb~, it has almost doubled from 144kb~ in v4 (90%~ increase), which is pretty significant, and increased by about 45kb from v5 (20%~ increase).

Loading times might actually become a problem if Bootstrap's CSS continues to grow in size, as most of the people will just hotload Boostrap from a CDN URL.

Perhaps there's a good way to shave off some CSS from other parts to make room for new utilities.

Or maybe this is the perfect case of just using the API...

I'm personally using the following backdrop filter map (which maps to Tailwind's defaults), and as a suggestion/feedback I'd like to suggest using multiples of 4px (or just .25rem) instead of 5px.

Something like 4px, 8px, 12px, 16px, 24px, 48px (large blur option is desired, especially for large overlays on big screens).

"bd-filter-blur": (
    property: backdrop-filter,
    class: bd-filter-blur,
    values: (
        null: blur(8px),
        none: blur(0),
        sm: blur(4px),
        md: blur(12px),
        lg: blur(16px),
        xl: blur(24px),
        2xl: blur(40px),
        3xl: blur(64px),
    )
),

[crftwrk]

Your utility doesn't just blur, it also applies a strong saturate() filter, which feels very opinionated (it increases the colors underneath quite a lot, and could hurt accessibility)

Yes, as I mentioned, this is just a rough example to have something to discuss. This needs to be fine-tuned, your example looks better than mine!

CSS size of Bootstrap v6 currently sits at 275kb~, it has almost doubled from 144kb~

Yes, that's high. Just thinking out loud, components like Card and Alert can be completely built using existing utility classes.

[pricop]

I thought of this myself many times...

While it's true that some components could be rebuilt using CSS classes, in Bootstrap's case that would be a bad idea.

Bootstrap is a design system. Components such as alert and card are a core part of Bootstrap and they are what it makes it so strong.

The moment we turn <div class="alert theme-secondary"></div> into <div class="class="p-3 bg-subtle-secondary text-secondary border border-secondary rounded"> we lose the ability to easily customize the components if we change our mind later about our design system later on.

Currently if I want to change my UI's spacing to be a bit more loose, all I have to do is to modify a few CSS/SCSS vars, and I'm done, that doesn't work with utility classes.

Not only that, but now you'd have to remember what spacing each component is supposed to be, so we'd also lose the ability to easily be consistent.

This would be a nightmare when working across multiple projects because now you can't use the component class anymore, but you'd have to either remember the exact CSS properties for the said component instead.

And lastly, but not least, semantics... Bootstrap thrives in this area, is very easy to understand by someone that's not familiar with CSS. So someone that's just getting started is going to have a hard time understanding what those classes even are.

I wish to see more utility classes added (especially backdrop-filter blur, because I'm making use of this myself too, haha), but I could understand why it might not happening.

There are areas where we could remove/reduce some of the code (e.g: for components display: grid; we can combine properties such as align-items: center and justify-content: center with just: place-items: center;, same thing with paddings, borders, margins, etc.).

I'm curious what's the official take on the CSS size getting bigger.