{"id":17396,"date":"2020-05-25T00:40:10","date_gmt":"2020-05-25T07:40:10","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=17396"},"modified":"2023-12-01T03:02:45","modified_gmt":"2023-12-01T11:02:45","slug":"css-blur","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-blur\/","title":{"rendered":"CSS Blur"},"content":{"rendered":"\n<p>When you\u2019re designing a website, you may decide that you want to add a blur effect to a particular image. For instance, if you\u2019re designing a website for a coffee house, you may want to blur an image so that you can place text in front of the image for the user to read.<br><\/p>\n\n\n\n<p>That\u2019s where the CSS blur function comes in. The blur function applies a blur effect to a specified input image, which you can then use with the \u201cfilter\u201d property to blur an image.<br><\/p>\n\n\n\n<p>This tutorial will discuss, an example, the basics of the CSS blur function and how you can use it to apply a blur effect to an image in your code. By the end of reading this tutorial, you\u2019ll be an expert at using the CSS blur function.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Filter<\/h2>\n\n\n\n<p>The CSS filter property allows you to apply graphical effects to an element on a web page. Often, the filter property is used to apply filters to images and backgrounds on a web page.<br><\/p>\n\n\n\n<p>There are a number of different filters offered by CSS. The opacity filter, for example, allows you to make an element more or less visible, and the drop-shadow filter allows you to add a shadow beneath an element on a web page.<br><\/p>\n\n\n\n<p>The syntax for applying a filter is as follows:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>filter: filterName(arguments);<\/pre><\/div>\n\n\n\n<p>For this tutorial, we\u2019re going to focus on the CSS blur function, which adds a blur effect to an image.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Blur<\/h2>\n\n\n\n<p>The CSS blur filter is a filter function that adds a blur effect to an image.<br><\/p>\n\n\n\n<p>The syntax for using the blur filter is as follows:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>filter: blur(radius);<\/pre><\/div>\n\n\n\n<p>In this syntax, \u201cradius\u201d refers to the radius of the blur effect that should be applied. The larger the radius value you specify, the more intense the blur added to an image element will be. If you specify the value \u201c0\u201d, no blur will be added to the image element to which the style is applied.<br><\/p>\n\n\n\n<p>The radius value you specify can accept any length value, such as em, px, rem, and cm.<br><\/p>\n\n\n\n<p>Let\u2019s walk through an example to illustrate how this function works. Suppose we are designing a web site for a local coffee house. On the coffee house\u2019s home page, they want a stock image of a coffee to appear. However, they want that image to appear with a blur effect with a radius of 2px.<br><\/p>\n\n\n\n<p>We could use the blur function and the filter property to accomplish this task. Here\u2019s the code we could use to create such an image with a blur function:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n&lt;img src=\"https:\/\/images.unsplash.com\/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1051&amp;q=80\" height=\"400\" width=\"600\" \/&gt;\n&lt;\/html&gt;\n  \n&lt;style&gt;\nimg {\n\tfilter: blur(2px);\n}\n&lt;\/style&gt;<\/pre><\/div>\n\n\n\n<p>Our code returns: <em>Click the&nbsp;<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>In our HTML file, we used an &lt;img&gt; tag to add an image to our web page. This image links to a stock image of a coffee. We use the \u201cheight\u201d and \u201cwidth\u201d parameters to set the height and width of our image to 400px and 600px, respectively.<br><\/p>\n\n\n\n<p>In our CSS code, we use the filter property and the blur function to apply a blur effect to all &lt;img&gt; tags on our web page. In this case, we specify a blur radius of 2px, which adds a slight blur effect to our image. As you can see above, the image of the coffee cup we are using appears slightly blurry because we have used the blur effect.<br><\/p>\n\n\n\n<p>Alternatively, if we wanted to specify a blur radius using another unit of measurement, we could do so by replacing \u201c2px\u201d with the value we want to use. So, if we wanted our image to have a blur with a 1.15em blur radius, we could do so by replacing the \u201c2px\u201d blur radius we specified above.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The CSS blur function allows you to create a blur for an image element on a web page. This function is used in combination with the filter property to apply the blur effect to an image.<br><\/p>\n\n\n\n<p>This tutorial discussed the basics of CSS filters and how to use the blur function to add a blur effect to an image on a web page. Now you\u2019re equipped with the knowledge you need to add blur effects to an image like a professional!<\/p>\n","protected":false},"excerpt":{"rendered":"When you\u2019re designing a website, you may decide that you want to add a blur effect to a particular image. For instance, if you\u2019re designing a website for a coffee house, you may want to blur an image so that you can place text in front of the image for the user to read. That\u2019s&hellip;","protected":false},"author":240,"featured_media":17397,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-17396","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Blur function applies a blur effect to a specified input image | CK<\/title>\n<meta name=\"description\" content=\"The CSS blur function allows you to apply a blur effect to an image. On Career Karma, learn how to use the CSS blur function.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-blur\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Blur\" \/>\n<meta property=\"og:description\" content=\"The CSS blur function allows you to apply a blur effect to an image. On Career Karma, learn how to use the CSS blur function.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-blur\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-25T07:40:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T11:02:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/three-women-looking-at-the-computer-3894378.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"665\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-blur\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-blur\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Blur\",\"datePublished\":\"2020-05-25T07:40:10+00:00\",\"dateModified\":\"2023-12-01T11:02:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-blur\/\"},\"wordCount\":716,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-blur\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/three-women-looking-at-the-computer-3894378.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-blur\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-blur\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-blur\/\",\"name\":\"Blur function applies a blur effect to a specified input image | CK\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-blur\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-blur\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/three-women-looking-at-the-computer-3894378.jpg\",\"datePublished\":\"2020-05-25T07:40:10+00:00\",\"dateModified\":\"2023-12-01T11:02:45+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS blur function allows you to apply a blur effect to an image. On Career Karma, learn how to use the CSS blur function.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-blur\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-blur\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-blur\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/three-women-looking-at-the-computer-3894378.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/three-women-looking-at-the-computer-3894378.jpg\",\"width\":1020,\"height\":665},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-blur\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Blur\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Blur function applies a blur effect to a specified input image | CK","description":"The CSS blur function allows you to apply a blur effect to an image. On Career Karma, learn how to use the CSS blur function.","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:\/\/careerkarma.com\/blog\/css-blur\/","og_locale":"en_US","og_type":"article","og_title":"CSS Blur","og_description":"The CSS blur function allows you to apply a blur effect to an image. On Career Karma, learn how to use the CSS blur function.","og_url":"https:\/\/careerkarma.com\/blog\/css-blur\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-05-25T07:40:10+00:00","article_modified_time":"2023-12-01T11:02:45+00:00","og_image":[{"width":1020,"height":665,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/three-women-looking-at-the-computer-3894378.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-blur\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-blur\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Blur","datePublished":"2020-05-25T07:40:10+00:00","dateModified":"2023-12-01T11:02:45+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-blur\/"},"wordCount":716,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-blur\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/three-women-looking-at-the-computer-3894378.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-blur\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-blur\/","url":"https:\/\/careerkarma.com\/blog\/css-blur\/","name":"Blur function applies a blur effect to a specified input image | CK","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-blur\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-blur\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/three-women-looking-at-the-computer-3894378.jpg","datePublished":"2020-05-25T07:40:10+00:00","dateModified":"2023-12-01T11:02:45+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS blur function allows you to apply a blur effect to an image. On Career Karma, learn how to use the CSS blur function.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-blur\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-blur\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-blur\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/three-women-looking-at-the-computer-3894378.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/three-women-looking-at-the-computer-3894378.jpg","width":1020,"height":665},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-blur\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Blur"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/17396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=17396"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/17396\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/17397"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=17396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=17396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=17396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}