---
title: Backdrop Blur
position: 1
seo_title: Telerik and Kendo UI Backdrop Blur Utilities
seo_description: Use the Telerik and Kendo UI Backdrop Blur Utilities to apply a
  backdrop blur filter to an element.
---
## Backdrop Blur

Telerik and Kendo UI Backdrop Blur Utilities are CSS classes that enable you to control the bounding box of the element's background.

<CSSRulesList data='{"id":"backdrop-blur"}'></CSSRulesList>

### Applying a Backdrop Blur

Use the `k-backdrop-blur`, `k-backdrop-blur-sm`, `k-backdrop-blur-md`, `k-backdrop-blur-lg` to apply different levels of backdrop blur to the element.

<LiveDemo data='{"links":[],"demo":"utils/filters/backdrop-blur/applying","height":300,"codePreviewSettings":{"filterSelector":".k-p-8","ignoreClassNames":"","customHtml":"<div class=\"k-p-8\" style=\"background: url(\"...\");\">\n  <div class=\"k-backdrop-blur-sm k-w-24 k-h-24\">\n  </div>\n</div><div class=\"k-p-8\" style=\"background: url(\"...\");\">\n  <div class=\"k-backdrop-blur k-w-24 k-h-24\">\n  </div>\n</div><div class=\"k-p-8\" style=\"background: url(\"...\");\">\n  <div class=\"k-backdrop-blur-lg k-w-24 k-h-24\">\n  </div>\n</div>"}}'></LiveDemo>

### Removing the Backdrop Blur

Use the `k-backdrop-blur-none` to remove all backdrop blur filters from an element.