{"id":4800,"date":"2024-04-14T10:56:11","date_gmt":"2024-04-14T02:56:11","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4800"},"modified":"2024-04-15T23:28:26","modified_gmt":"2024-04-15T15:28:26","slug":"trim-content-using-blending-modes","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/trim-content-using-blending-modes\/","title":{"rendered":"Trim content using blending modes"},"content":{"rendered":"
Brighten and dim blending modes can function like shape cutters, removing the original fill from either dark or light elements in a design, and revealing the background through those elements. You can use any background you prefer \u2014 a solid hue, an image, or even a video \u2014 to shine through the elements.<\/p>\n

Start by inserting a Segment<\/strong> onto the canvas. Afterwards, nest a Backdrop video<\/strong> or Visual<\/strong> component and a Block element<\/strong> within the Segment<\/strong>. Finally, nest components (e.g., text units, paragraphs, buttons, etc.) inside the Block element<\/strong>.<\/p>\n

You will be able to view your Backdrop video<\/strong> or Visual<\/strong> through these elements, so adjust their heights, dimensions, etc. accordingly. Explore more about Background videos.<\/p>\n

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

To adjust a blending mode with a white block element:<\/p>\n

    \n
  1. Choose the Block element<\/strong><\/li>\n
  2. Access the Design panel<\/strong> > Backgrounds<\/strong><\/li>\n
  3. Tap the palette in Tint <\/strong>to apply the Block element <\/strong>background as white<\/strong><\/li>\n
  4. Configure the tint (e.g., background hue, text hue, etc.) to black<\/strong> for all components in the Block element <\/strong>that you want to be translucent<\/li>\n
  5. Choose the Block element<\/strong><\/li>\n
  6. Access the Design panel<\/strong> > Impacts<\/strong><\/li>\n
  7. Unfold the Merging <\/strong>menu and choose brighten<\/strong><\/li>\n<\/ol>\n
    \n
    \"In<\/div>\n<\/figure>\n

    To configure the blending mode with a black block element:<\/p>\n

      \n
    1. Choose the Block element<\/strong><\/li>\n
    2. Access the Design panel<\/strong> > Backgrounds<\/strong>\u00a0<\/li>\n
    3. Tap the palette in Tint<\/strong> to apply the Block element <\/strong>background as black<\/strong><\/li>\n
    4. Configure the tint (e.g., background hue, text hue, etc.) to white<\/strong> for all components in the Block element <\/strong>that you want to be translucent<\/li>\n
    5. Choose the Block element<\/strong><\/li>\n
    6. Access the Design panel<\/strong> > Impacts<\/strong><\/li>\n
    7. Unfold the Merging <\/strong>menu and choose dim<\/strong><\/li>\n<\/ol>\n

      Brighten<\/strong> makes dim elements vanish; dim<\/strong> makes shiny elements vanish. Discover more about blending modes.<\/p>\n

      \n
      \"Blending<\/div>\n<\/figure>\n
      \n
      \"Blending<\/div>\n<\/figure>\n
      Reminder:<\/strong> You can insert any sort of background to your website (video, image, hue, etc.). Just ensure that the background you include has adequate difference with the background of the block element. This guarantees that text and other elements are noticeable within the block element. To find out more, visit the Webflow University lesson on color contrast ratios.<\/h6>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use blending modes to clip black and white content in a div block.","protected":false},"author":2,"featured_media":5202,"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-4800","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\/4800","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=4800"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4800\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5152"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}