{"id":32850,"date":"2024-02-23T07:00:00","date_gmt":"2024-02-23T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=32850"},"modified":"2025-10-09T11:32:37","modified_gmt":"2025-10-09T18:32:37","slug":"adding-blur-effect-background-image-css","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css","title":{"rendered":"Adding a Blur Effect to a Background Image With CSS and Cloudinary"},"content":{"rendered":"\n<p>Working with images and texts in a web application is a complex task. In many scenarios, you want to blur a picture to make it less distracting or to make the text on top of it more readable. For example, blurring the background image of a modal window or page section when it isn&#8217;t in focus. We&#8217;ll explore how to blur a background image in html using native CSS and Cloudinary.<\/p>\n\n\n\n<p>In this blog post, you\u2019ll learn how to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a blur effect with the CSS <code>filter<\/code> attribute.<\/li>\n\n\n\n<li>Add a partial blur effect to a background with the CSS <code>backdrop-filter<\/code>.<\/li>\n\n\n\n<li>Use Cloudinary\u2019s blur transformation.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Background Blur With CSS <code>filter<\/code> Attribute<\/h2>\n\n\n\n<p>The most straightforward way to blur an image is to combine the CSS <code>filter<\/code> property and function <code>blur()<\/code> with <code>filter: blur(degree-of-blur);<\/code><\/p>\n\n\n\n<p>This CSS function takes a single parameter <code>degree-of-blur<\/code>, the amount of <a href=\"https:\/\/cloudinary.com\/glossary\/gaussian-blur\">Gaussian blur<\/a> to apply to the target image or the selected element. The higher we set the value of <code>degree-of-blur<\/code>, the more blurry the picture will be. In the example below, we\u2019ll apply a blur of <code>5px<\/code> to the image:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n\n<span class=\"hljs-selector-class\">.blur<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0 <span class=\"hljs-attribute\">filter<\/span>: <span class=\"hljs-built_in\">blur<\/span>(<span class=\"hljs-number\">5px<\/span>);\n\n}\n\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/mayashavin\/image\/upload\/w_500,f_auto,q_auto\/v1597000013\/examples\/cat_relaxing\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"sample image\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"blur\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The result:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1747243974\/blog-Adding_a_Blur_Effect_to_a_Background_Image_With_CSS_and_Cloudinary-1.png\" alt=\"Image showing example results of a css background blur with degree of blur\"\/><\/figure>\n\n\n\n<p>This solution works well if the target element is an <code>img<\/code> or <code>picture<\/code>, but it also blurs the entire image, including any text element nested within the target element. For instance, if you have a text element on top of the <a href=\"https:\/\/cloudinary.com\/background-remover\">background image<\/a> using <code>background-image<\/code> property, as follows:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n\n<span class=\"hljs-selector-class\">.background<\/span> {\n\n\u00a0\u00a0 <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">url<\/span>(https:\/\/res.cloudinary.com\/mayashavin\/image\/upload\/w_500,f_auto,q_auto\/v1597000013\/examples\/cat_relaxing) no-repeat center;\n\n\u00a0\u00a0 <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n\n\u00a0\u00a0 <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">400px<\/span>;\n\n}\n\n<span class=\"hljs-selector-class\">.blur<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0 <span class=\"hljs-attribute\">filter<\/span>: <span class=\"hljs-built_in\">blur<\/span>(<span class=\"hljs-number\">5px<\/span>);\n\n}\n\n<span class=\"hljs-selector-class\">.heading<\/span> {\n\n<span class=\"hljs-attribute\">text-align<\/span>: center;\n\n}\n\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"background blur\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"heading\"<\/span>&gt;<\/span>Some text heading<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The text will be blurred as well:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1747243973\/blog-Adding_a_Blur_Effect_to_a_Background_Image_With_CSS_and_Cloudinary-2.png\" alt=\"Image showing example of a background image blur css target element with text and image blurred\"\/><\/figure>\n\n\n\n<p>So, <code>filter<\/code> with <code>blurr()<\/code> isn\u2019t ideal if you want to blur only the background image but not the content on top of it. Using the CSS <code>backdrop-filter<\/code> property would be a better solution.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add Partial Blur Effect to a Background With CSS <code>backdrop-filter<\/code><\/h2>\n\n\n\n<p>The syntax of the CSS <code>backdrop-filter<\/code> property is similar to <code>filter<\/code>, which we can apply a blurry effect using <code>blur()<\/code> function: <code>backdrop-filter: blur(degree-of-blur);<\/code><\/p>\n\n\n\n<p>Unlike <code>filter<\/code>, the CSS <code>backdrop-filter<\/code> property applies a graphical filter effect to the area behind the target element. That means our background blur effect will apply to everything behind the target element, not the target element itself. In the example below, we\u2019ll define a <code>.with-blur-backdrop<\/code> class selector with the following properties:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A <code>backdrop-filter<\/code> (also <code>-webkit-background-filter<\/code> for Webkit-based browsers support) property with <code>5px<\/code> blurry effect.<\/li>\n\n\n\n<li>A semi-transparent background color to have the blurry effect visible.<\/li>\n\n\n\n<li>Some paddings to make the text more readable.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.with-blur-backdrop<\/span> {\n\n\u00a0\u00a0<span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">255<\/span>, <span class=\"hljs-number\">255<\/span>, <span class=\"hljs-number\">255<\/span>, <span class=\"hljs-number\">0.4<\/span>);\n\n\u00a0\u00a0<span class=\"hljs-attribute\">-webkit-backdrop-filter<\/span>: <span class=\"hljs-built_in\">blur<\/span>(<span class=\"hljs-number\">5px<\/span>);\n\n\u00a0\u00a0<span class=\"hljs-attribute\">backdrop-filter<\/span>: <span class=\"hljs-built_in\">blur<\/span>(<span class=\"hljs-number\">5px<\/span>);\n\n\u00a0\u00a0<span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">30px<\/span>;\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We\u2019ll also define another class selector, `.background` with a background image as <code>cover<\/code> using <code>background-size<\/code>, as below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.background<\/span> {\n\n\u00a0\u00a0<span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">url<\/span>(https:\/\/res.cloudinary.com\/mayashavin\/image\/upload\/w_500,f_auto,q_auto\/v1597000013\/examples\/cat_relaxing) no-repeat center;\n\n\u00a0\u00a0<span class=\"hljs-attribute\">background-size<\/span>: cover;\n\n\u00a0\u00a0<span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">400px<\/span>;\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In our HTML, we\u2019ll apply these two class selectors to the target element and its parent element, as below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"background\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"with-blur-backdrop\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>With blur backdrop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the browser, the text \u201cWith blur backdrop\u201d isn\u2019t blurred, but there is a blurry area behind the text.<\/p>\n\n\n\n<p>If you want to apply the blurry effect to the entire background image, you can set the <code>height<\/code> of any element with the <code>with-blur-backdrop<\/code> class selector to <code>inherit<\/code> (or <code>100%<\/code> depending on your app&#8217;s layout), as below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">.with-blur-backdrop {\n\n\u00a0\u00a0<span class=\"hljs-comment\">\/\/...<\/span>\n\n\u00a0\u00a0<span class=\"hljs-attr\">height<\/span>: inherit;\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The output of the browser will now become:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1747243974\/blog-Adding_a_Blur_Effect_to_a_Background_Image_With_CSS_and_Cloudinary-3.png\" alt=\"Image showing example of how to blur background image in CSS while text is unblurred\"\/><\/figure>\n\n\n\n<p>And that&#8217;s it. You\u2019ve successfully applied a blur effect to the background image of an element without blurring the content displayed on top of it.&nbsp;<\/p>\n\n\n\n<p>A great use case for backdrop-filter is to apply a graphical effect on a modal&#8217;s backdrop or create a blurry effect of images in a gallery when they are behind the top navigation header of a page during user scrolling.<\/p>\n\n\n\n<p>In the next section, we\u2019ll explore how we can easily apply a blur effect to a background image using Cloudinary&#8217;s blur transformation.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using Cloudinary&#8217;s Blur Transformation<\/h2>\n\n\n\n<p>Cloudinary is a <a href=\"https:\/\/cloudinary.com\/platform\">cloud-based image and video management solution<\/a> that provides comprehensive tools to manage, optimize, and deliver media files. It also offers a robust set of transformation features that allow you to manipulate images on the fly via images&#8217; URLs. One of these features is the ability to apply a blur effect to an image using the <code>e_blur<\/code> transformation parameter.<\/p>\n\n\n\n<p>To apply a blur effect to an image, we can add the <code>e_blur<\/code> parameter to the image&#8217;s Cloudinary URL after <code>\/upload\/<\/code>, with <code>e_blur:blur_amount<\/code>.<\/p>\n\n\n\n<p>With this, <code>blur_amount<\/code> is the blur level to apply to the image, from 1 to 2000. The higher the blur level, the more blurry the image. For example, if we want to use a blur effect level of 500 to a picture, we can add the transformation parameter like this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/mayashavin\/image\/upload\/e_blur:500\/examples\/cat_relaxing\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"blurry relaxing cat\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The above code will generate the following image:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1747243974\/blog-Adding_a_Blur_Effect_to_a_Background_Image_With_CSS_and_Cloudinary-4.png\" alt=\"Image showing example of how Cloudinary can blur background css\"\/><\/figure>\n\n\n\n<p>The <code>e_blur<\/code> transformation parameter is an excellent solution for applying a blur effect to an image. However, this solution won&#8217;t work when we need to blur only a part of the image. In that case, you can use the <code>e_blur_region<\/code> with the target region&#8217;s coordinates (<code>x<\/code>, <code>y<\/code>, <code>width<\/code>, and <code>height<\/code>) instead. Take the previous example, for instance. We\u2019ll replace <code>e_blur:500<\/code> with <code>e_blur_region:500<\/code> and add the target region&#8217;s coordinates as below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/mayashavin\/image\/upload\/e_blur_region:500,x_0,y_0.5,w_1.0\/examples\/cat_relaxing\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"blurry relaxing cat\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In which, <code>x_0<\/code> and <code>y_0.5<\/code> specify the offsets of the target region where <code>x_0<\/code> is the starting point (bottom), and <code>y_0.5<\/code> is the bottom half location (<code>0.5<\/code>) on the y-axis of the image. <code>w_1.0<\/code> is the width of the target region, which is <code>100%<\/code> of the image (<code>1.0<\/code>).&nbsp;<\/p>\n\n\n\n<p>The URL&#8217;s result will be a half-blurry image, as below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1747243974\/blog-Adding_a_Blur_Effect_to_a_Background_Image_With_CSS_and_Cloudinary-5.png\" alt=\"Image showing example of how to blur background image in css using Cloudinary\u2019s blur region.\"\/><\/figure>\n\n\n\n<p>Cloudinary&#8217;s blur transformation allows you to apply multiple transformations to an image without changing the original. Then, you can deliver that image in an optimized format and size, depending on the user&#8217;s device and browser, using <code>f_auto<\/code> and <code>q_auto<\/code> parameters. With that, we can easily apply a blur effect to a background image using Cloudinary&#8217;s blur transformation and reduce the amount of CSS code required to achieve a similar effect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts on How to Blur Background Images in CSS<\/h2>\n\n\n\n<p>We\u2019ve explored different ways to apply a blur effect to a background image using CSS <code>filter<\/code>, <code>backdrop-filter<\/code> properties, and Cloudinary&#8217;s blur transformation. Each solution has pros and cons, and you should choose the one that best suits your use case. You can also experiment further with each solution to achieve the desired effect.<\/p>\n\n\n\n<p>Transform your website&#8217;s visual appeal with Cloudinary&#8217;s image transformation capabilities. <a href=\"https:\/\/cloudinary.com\/users\/register_free\">Sign up for a free account today<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Working with images and texts in a web application is a complex task. In many scenarios, you want to blur a picture to make it less distracting or to make the text on top of it more readable. For example, blurring the background image of a modal window or page section when it isn&#8217;t in [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":32821,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[75,426,165],"class_list":["post-32850","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-css","tag-featured","tag-image-transformation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Blur a Background Image in CSS<\/title>\n<meta name=\"description\" content=\"Learn how to apply a background blur CSS effect to a background image using CSS filter and backdrop-filter properties and Cloudinary\u2019s blur transformation.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding a Blur Effect to a Background Image With CSS and Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Learn how to apply a background blur CSS effect to a background image using CSS filter and backdrop-filter properties and Cloudinary\u2019s blur transformation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-23T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-09T18:32:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1707510778\/blurry_images-Blog\/blurry_images-Blog.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Adding a Blur Effect to a Background Image With CSS and Cloudinary\",\"datePublished\":\"2024-02-23T15:00:00+00:00\",\"dateModified\":\"2025-10-09T18:32:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css\"},\"wordCount\":984,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1707510778\/blurry_images-Blog\/blurry_images-Blog.jpg?_i=AA\",\"keywords\":[\"CSS\",\"Featured\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css\",\"url\":\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css\",\"name\":\"How to Blur a Background Image in CSS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1707510778\/blurry_images-Blog\/blurry_images-Blog.jpg?_i=AA\",\"datePublished\":\"2024-02-23T15:00:00+00:00\",\"dateModified\":\"2025-10-09T18:32:37+00:00\",\"description\":\"Learn how to apply a background blur CSS effect to a background image using CSS filter and backdrop-filter properties and Cloudinary\u2019s blur transformation.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1707510778\/blurry_images-Blog\/blurry_images-Blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1707510778\/blurry_images-Blog\/blurry_images-Blog.jpg?_i=AA\",\"width\":2000,\"height\":1100,\"caption\":\"Image showing background blur CSS example\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding a Blur Effect to a Background Image With CSS and Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Blur a Background Image in CSS","description":"Learn how to apply a background blur CSS effect to a background image using CSS filter and backdrop-filter properties and Cloudinary\u2019s blur transformation.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css","og_locale":"en_US","og_type":"article","og_title":"Adding a Blur Effect to a Background Image With CSS and Cloudinary","og_description":"Learn how to apply a background blur CSS effect to a background image using CSS filter and backdrop-filter properties and Cloudinary\u2019s blur transformation.","og_url":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css","og_site_name":"Cloudinary Blog","article_published_time":"2024-02-23T15:00:00+00:00","article_modified_time":"2025-10-09T18:32:37+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1707510778\/blurry_images-Blog\/blurry_images-Blog.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Adding a Blur Effect to a Background Image With CSS and Cloudinary","datePublished":"2024-02-23T15:00:00+00:00","dateModified":"2025-10-09T18:32:37+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css"},"wordCount":984,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1707510778\/blurry_images-Blog\/blurry_images-Blog.jpg?_i=AA","keywords":["CSS","Featured","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css","url":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css","name":"How to Blur a Background Image in CSS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1707510778\/blurry_images-Blog\/blurry_images-Blog.jpg?_i=AA","datePublished":"2024-02-23T15:00:00+00:00","dateModified":"2025-10-09T18:32:37+00:00","description":"Learn how to apply a background blur CSS effect to a background image using CSS filter and backdrop-filter properties and Cloudinary\u2019s blur transformation.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1707510778\/blurry_images-Blog\/blurry_images-Blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1707510778\/blurry_images-Blog\/blurry_images-Blog.jpg?_i=AA","width":2000,"height":1100,"caption":"Image showing background blur CSS example"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/adding-blur-effect-background-image-css#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding a Blur Effect to a Background Image With CSS and Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1707510778\/blurry_images-Blog\/blurry_images-Blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=32850"}],"version-history":[{"count":13,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32850\/revisions"}],"predecessor-version":[{"id":38731,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32850\/revisions\/38731"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/32821"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=32850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=32850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=32850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}