{"id":4990,"date":"2024-04-14T11:15:40","date_gmt":"2024-04-14T03:15:40","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4990"},"modified":"2024-04-14T11:15:40","modified_gmt":"2024-04-14T03:15:40","slug":"background-filters","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/background-filters\/","title":{"rendered":"Background filters"},"content":{"rendered":"\n
\n
\n
\"A<\/div>\n<\/figure>\n

Elevate your foreground content by utilizing and overlaying background filters to generate distinctive visual effects on your background components. You can also instantly preview each background filter in your design \u2014 all without the need for any custom code. <\/p>\n

Important:<\/strong> Background filters are currently in beta. These styles won\u2019t display accurately on Firefox in the Webflow Designer or published sites until support is integrated into Firefox. Refer to current browser support. <\/p><\/blockquote>\n

This tutorial will cover the following:<\/p>\n

    \n
  1. Definition of a background filter<\/li>\n
  2. Behavior of background filters<\/li>\n
  3. Adding background filters to an element<\/li>\n<\/ol>\n

    Definition of a background filter<\/h2>\n

    Integrating a background filter to any element enables you to implement filter effects (e.g., blur, color shift, contrast, etc.) to transparent areas within the element\u2019s boundary. Anything visible behind the element through the transparent areas will be influenced by the background filter. <\/p>\n

    You can also implement several background filters to a single element. You can stack and merge the background filters to produce a variety of visual effects.<\/p>\n

    Key detail:<\/strong> Since the background filter is applied to everything behind the element, to observe the effect, you must make the element, some parts of the element, or its background somewhat transparent.<\/p><\/blockquote>\n

    Comparison of background filters versus filters<\/h3>\n

    Background filters deliver the same impact as filters, with one significant contrast \u2014 background filters are exclusive to areas behind the element rather than to the element and its descendants. On the contrary, filters directly affect the element and its descendants, without impacting anything behind the element. <\/p>\n

    \n
    <\/div>
    The distinction between a haze background filter (top) and a haze filter (bottom) is depicted. The top navbar with the haze background filter<\/strong> makes elements behind it appear hazy. The bottom navbar with the haze filter<\/strong> impacts the element and its descendants (e.g., the entire navbar and text are haze) and doesn\u2019t haze elements behind it. <\/figcaption><\/figure>\n

    Behavior of background filters<\/h2>\n

    The Webflow\u2019s Style panel<\/strong> contains 8 Background filters <\/strong>in the Effects<\/strong> category. Filters that operate similarly are grouped together in the Background filters dropdown. These filter groupings comprise:<\/p>\n

      \n
    • General (Blur)<\/li>\n
    • Color alterations (Brightness, Contrast, Hue rotate, and Saturation)<\/li>\n
    • Color effects (Grayscale, Invert, and Sepia)<\/li>\n<\/ul>\n
      \n
      \"A<\/div>\n<\/figure>\n

      Let\u2019s explore how each background filter functions when applied to an element with somewhat transparent content. <\/p>\n

      General<\/h3>\n

      Blur<\/h4>\n

      Blur<\/strong> renders a gaussian blur to your content. The blur radius<\/strong> dictates the intensity of the blur \u2014 larger values result in more blur, while smaller values lead to lesser blur. <\/p>\n

      \n
      \"A<\/div>\n<\/figure>\n

      Color alterations<\/h3>\n

      Brightness<\/h4>\n

      Brightness<\/strong> adjusts the brightness of content to appear brighter or dimmer. You can regulate the degree \u2014 values below 100% diminish brightness, while values exceeding 100% heighten brightness. <\/p>\n

      \n
      \"A<\/div>\n<\/figure>\n

      Contrast<\/h4>\n

      Contrast<\/strong> amplifies or decreases the contrast of your content. You can modulate the magnitude \u2014 values below 100% reduce contrast, while values over 100% enhance contrast. <\/p>\n

      \n
      \"A<\/div>\n<\/figure>\n

      Hue rotate<\/h4>\n

      Hue rotate<\/strong> alters the global hue of your content, based on hues present across a standard color circle. Youcan adjust the degree at which the hue shifts around the color circle. Smaller angles (e.g., 10 degrees) will show cool colored hues, while larger angles (e.g., 340 degrees) will display warm colored hues. You have the option to manually input degrees beyond 360, resulting in the color circle wrapping around (e.g., 400 degrees will look the same as 40 degrees).\u00a0<\/p>\n

      \n
      \"A<\/div>\n<\/figure>\n

      Saturation<\/h4>\n

      Saturation<\/strong> can be adjusted to increase or decrease the saturation of your content. Values below 100% decrease saturation, while values above 100% increase it.\u00a0<\/p>\n

      \n
      \"A<\/div>\n<\/figure>\n

      Color effects<\/h3>\n

      Grayscale<\/h4>\n

      Grayscale<\/strong> converts your content to grayscale. You can modify the intensity \u2014 values below 100% reduce the grayscale effect, while values at or above 100% show complete grayscale content.\u00a0<\/p>\n

      \n
      \"A<\/div>\n<\/figure>\n

      Invert<\/h4>\n

      Invert<\/strong> changes the colors of your content by inverting them. You can alter the effect \u2014 values below 100% reduce the inversion effect, while values at or above 100% show content completely inverted.<\/p>\n

      \n
      \"An<\/div>\n<\/figure>\n

      Sepia<\/h4>\n

      Sepia<\/strong> changes your content to a sepia tone. You can adjust the level \u2014 values below 100% lessen the sepia effect, while values at or above 100% display entirely sepia-toned content.<\/p>\n

      \n
      \"A<\/div>\n<\/figure>\n

      How to incorporate backdrop filters into an element<\/h2>\n

      You can apply backdrop filters to any element you design. To visualize the effect, ensure that your element\u2019s content has some transparency. This can be achieved by using SVG or PNG images, giving the element a transparent background, or decreasing the element\u2019s opacity.\u00a0<\/p>\n

      Let\u2019s use a blur<\/strong> backdrop filter on an element:\u00a0<\/p>\n

        \n
      1. Choose<\/strong> your element<\/li>\n
      2. Access the Style panel<\/strong> > Effects<\/strong> > Backdrop filters<\/strong><\/li>\n
      3. Click the \u201cplus\u201d icon<\/strong> next to Backdrop filters<\/li>\n
      4. Open the filter<\/strong> dropdown menu<\/strong> to view available filters<\/li>\n
      5. Hover<\/strong> over any filter to preview the effect<\/li>\n
      6. Select Blur<\/strong> from the dropdown menu\u00a0<\/li>\n
      7. Adjust the blur radius<\/strong> to set the desired blur level on your element<\/li>\n
      8. Click away from the backdrop filter settings to save<\/strong> your modifications<\/li>\n<\/ol>\n
        \n
        \"The<\/div>\n<\/figure>\n
        \n
        \"The<\/div>\n<\/figure>\n
        \n
        \"Backdrop<\/div>\n<\/figure>\n

        If you desire to layer multiple filters, you can follow the same steps repeatedly. A combination of filters can be seen as layers where you have the flexibility to adjust their arrangement by dragging and dropping.<\/p>\n

        \n
        <\/div>
        Three backdrop filters are piled up in the Backdrop filters section of the Style panel.<\/figcaption><\/figure>\n

        To alternate between visible<\/strong> and hidden<\/strong> states for each backdrop filter effect:\u00a0<\/p>\n

          \n
        1. Access the Style panel <\/strong>> Effects<\/strong> > Backdrop filters<\/strong><\/li>\n
        2. Hover<\/strong> over the desired filter to either conceal or reveal it<\/li>\n
        3. Click on the \u201ceye\u201d emblem<\/strong> to change the visibility of the filter<\/li>\n<\/ol>\n
          \n
          \"The<\/div>\n<\/figure>\n

          To customize your filter\u2019s configurations:\u00a0<\/p>\n

            \n
          1. Access the Style panel <\/strong>> Effects<\/strong> > Backdrop filters<\/strong><\/li>\n
          2. Locate the filter<\/strong> you wish to modify to access its settings<\/li>\n
          3. Implement your adjustments<\/strong> and exit the filter\u2019s settings to save your changes<\/li>\n<\/ol>\n

            To eliminate a filter:\u00a0<\/p>\n

              \n
            1. Access the Style panel <\/strong>> Effects<\/strong> > Backdrop filters<\/strong><\/li>\n
            2. Hover<\/strong> over the filter you want to erase<\/li>\n
            3. Click on the \u201ctrash\u201d<\/strong> icon<\/li>\n<\/ol>\n
              \n
              \"The<\/div>\n<\/figure>\n

              Additional resources:<\/strong> Find out more about the Style panel.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use backdrop filters to create dynamic blurring and color effects on the area behind elements.","protected":false},"author":2,"featured_media":4991,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-4990","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4990"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4990\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/4991"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}