Repository navigation
[Feature Request] Scrim with blur should be easier to set #23215
Description
Problem to solve
Setting scrim with blur requires:
- overriding
opacityto 1 - setting color with alpha
- custom CSS to set the
backdrop-filtervalue - repeating those adjustments for VOverlay and VNavigationDrawer
Proposed solution
Since it is very popular design choice, it would be great to have it baked into design system (even if MD3 does not include it in the spec) as app-level variable --v-scrim-blur along with variables for opacity and color.
Optional
Consider naming variables --v-backdrop-* as "scrim" is strictly from Material Design (well.. it depends on how we want to publish non-material "spins" of Vuetify).
Activity
rafaself commentedon Oct 5, 2026
I agree with the general direction here. The main benefit is not just adding
backdrop-filter, but separating scrim color opacity from the element'sopacity. Today, using element opacity also affects the visual result of the blur, which makes this harder to configure cleanly.A shared design token for blur makes sense, while component specific opacity defaults could still be preserved, since
VOverlayandVNavigationDrawercurrently use different values.So something based on CSS variables/design tokens seems cleaner than extending the
scrimprop with more behavior.