# Blur Utilities for applying Gaussian blur filters to elements. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-blur--introduction ## Variants documented in Storybook - BlurShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-blur--blurshowcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Blur. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Blur Showcase — Blur Intensity Levels HTML: ```html
No Blur
Subtle Blur
Soft Blur
Medium Blur
Strong Blur
``` React: ```jsx import React from 'react'; const BlurExample1Demo = () => ( <>
No Blur
Subtle Blur
Soft Blur
Medium Blur
Strong Blur
); export default BlurExample1Demo; ``` Angular: ```html
No Blur
Subtle Blur
Soft Blur
Medium Blur
Strong Blur
``` ### 2. Blur Showcase — Visual Context Demo HTML: ```html
Content over blurred background
``` React: ```jsx import React from 'react'; const BlurExample2Demo = () => ( <> {/* Glassmorphism-style blurred container */}
Content over blurred background
); export default BlurExample2Demo; ``` Angular: ```html
Content over blurred background
``` ### 3. Introduction — Introduction HTML: ```html
Utilities

Blur Utilities Reference

A reference for applying Gaussian blur filters to elements within the UX4G Design System.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Blur Intensity Levels

Format: ux4g-blur-{size}

None ux4g-blur-0
Subtle ux4g-blur-1
Soft ux4g-blur-2
Medium ux4g-blur-3
Strong ux4g-blur-4
``` React: ```jsx import React from 'react'; const BlurExample3Demo = () => ( <>
Utilities

Blur Utilities Reference

A reference for applying Gaussian blur filters to elements within the UX4G Design System.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

{/* Blur Levels */}

Blur Intensity Levels

Format: ux4g-blur-{size}

None ux4g-blur-0
Subtle ux4g-blur-1
Soft ux4g-blur-2
Medium ux4g-blur-3
Strong ux4g-blur-4
); export default BlurExample3Demo; ``` Angular: ```html
Utilities

Blur Utilities Reference

A reference for applying Gaussian blur filters to elements within the UX4G Design System.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Blur Intensity Levels

Format: ux4g-blur-{size}

None ux4g-blur-0
Subtle ux4g-blur-1
Soft ux4g-blur-2
Medium ux4g-blur-3
Strong ux4g-blur-4
``` ## CSS class reference The following CSS partials define the Blur utility classes used in the examples above: ### blur.utilities.css ```css .ux4g-blur-0 { filter: blur(var(--ux4g-blur-none)); } .ux4g-blur-1 { filter: blur(var(--ux4g-blur-subtle)); } .ux4g-blur-2 { filter: blur(var(--ux4g-blur-soft)); } .ux4g-blur-3 { filter: blur(var(--ux4g-blur-medium)); } .ux4g-blur-4 { filter: blur(var(--ux4g-blur-strong)); } ``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.