{"id":5009,"date":"2024-04-14T22:39:05","date_gmt":"2024-04-14T14:39:05","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5009"},"modified":"2024-04-14T22:39:05","modified_gmt":"2024-04-14T14:39:05","slug":"harmonizing-style","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/harmonizing-style\/","title":{"rendered":"Harmonizing style"},"content":{"rendered":"\n
\n
\n
\"An<\/div>\n<\/figure>\n

If you’ve previously utilized image editing tools, blending styles in Webflow will seem like a breeze. When components, akin to strata, layer over one another, blending enables you to accomplish diverse types of visual impacts depending on the style you choose. You can live preview each blending style on the selected component in the Webflow Designer \u2014 and you can perform all of this without resorting to any custom code. <\/p>\n

In this tutorial, you will discover:<\/p>\n

    \n
  1. Definition of a blending style<\/li>\n
  2. Behavior of each blending style<\/li>\n
  3. Application of a blending style to a component<\/li>\n<\/ol>\n

    Definition of a blending style<\/h2>\n

    Blending styles in Webflow provide an array of various methods for a component to merge with (or overlap) other elements beneath it \u2014 all devoid of the need for custom code. Webflow takes charge of the mix-blend style CSS property for you, enabling you to specify how a component’s content ought to merge with the content of the component’s parent and the background of the component. Blending styles grant you the ability to unlock numerous creative prospects to transcend mere element transparency adjustments.<\/p>\n

    You can conceptualize it in these terms: your top component with the blending style configured on it (your foreground) intersects and intertwines with its parent component and the lower components (your background components) and generates a fresh, ultimate color (the amalgamation of the colors from the top and bottom components).\u00a0<\/p>\n

    \n
    <\/div>
    In these illustrations, the upper component \u2014 your foreground \u2014 encompasses blue hued text elements (shown in the left box). The lower components \u2014 your middleground and background \u2014 feature yellow and magenta text elements (shown in the right box).\u00a0<\/figcaption><\/figure>\n

    Behavior of each blending style<\/h2>\n

    There exist 16 blending styles within Webflow’s Affected<\/strong> section of the Style panel<\/strong>. Styles that act analogously are grouped consecutively in the blending style dropdown. These style collections consist of:<\/p>\n

      \n
    • Default style (Standard)<\/li>\n
    • Dim modes (Dim, Blend, and Shade burn)<\/li>\n
    • Brighten modes (Brighten, Project, and Tone dodge)<\/li>\n
    • Comparison modes (Overlap, Mellow glow, and Intense glow)<\/li>\n
    • Affiliation modes (Hue, Tone, Paint, and Brightness)<\/li>\n<\/ul>\n
      \n
      \"A<\/div>\n<\/figure>\n

      We shall elucidate on the actions of each blending style once you employ it to your top component.\u00a0<\/p>\n

      Default style<\/h3>\n

      Standard<\/h4>\n

      The Standard<\/strong> blending style is the instilled blending style for components on the Webflow platform. The eventual color comprises the top component’s color, irrespective of the color of the bottom component. The outcome simulates akin to 2 unambiguous sheets of paper overlapping.<\/p>\n

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

      Dim modes<\/h3>\n

      As the designation suggests, the blending styles in the Dim grouping will render the final colors dimmer. Anything white in the top component will vanish, and anything darker than white will cast a dimming influence on the lower components.<\/p>\n

      Dim<\/h4>\n

      Dim<\/strong> mode yields a final color constituted of the darkest values from the top and bottom components. If both components exhibit identical colors, no alteration occurs.<\/p>\n

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

      Harmonize<\/h4>\n

      Harmonize <\/strong>style multiplies the colors of the top and bottom components. A black color yields a black final color, and a white color brings about no change. The outcome resembles two pictures imprinted on translucent film overlapping.<\/p>\n

      Harmonize<\/strong> can produce assorted levels of dimming contingent on the luminance values of the top component’s colors, rendering it useful for dimming components or crafting shadows.\u00a0<\/p>\n

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

      Darken Color<\/h4>\n

      Darken Color<\/strong> method provides a deeper result compared to Multiply <\/strong>method by increasing the differentiation between the top and bottom element hues, which leads to more intensely saturated mid-tones and reduced highlights. White hues in the top element produce no alteration.<\/p>\n

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

      Brighten techniques<\/h3>\n

      Approaches categorized under the Brighten section make final colors more radiant. Anything that is black in the top element will become unnoticeable, and anything brighter than black will have a shading impact on lower elements.<\/p>\n

      Brighten<\/h4>\n

      Brighten<\/strong> method generates a final color made up of the lightest values from the top and bottom elements. When the top and bottom elements share the same hue, no adjustments occur.<\/p>\n

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

      Display
      <\/h4>\n

      Display<\/strong> method always results in a hue that is more luminous. Black has no effect, while brighter hues remain. The outcome is akin to illuminating two overlapping images on a projection surface.<\/p>\n

      Display<\/strong> method can produce various degrees of illumination based on the luminance values of the top element, making it useful for brightening components or forming highlights.\u00a0<\/p>\n

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

      Tone dodge<\/h4>\n

      Tone dodge<\/strong> method offers a more radiant impact than Display<\/strong> method by reducing the differentiation between the top and bottom element hues, resulting in more vivid mid-tones and blown highlights. Black hues do not change.\u00a0<\/p>\n

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

      Comparison methods<\/h3>\n

      Comparison methods involve a blend of techniques from the Darken and Brighten categories. They create a contrast by both brightening and darkening the final hues through complementary blending methods to achieve the ultimate outcome.<\/p>\n

      Hues darker than 50% gray will undergo a darkening effect. Hues brighter than 50% gray will undergo a brightening effect.<\/p>\n

      Overlap<\/h4>\n

      Overlap<\/strong> method combines the Multiply<\/strong> and Display <\/strong>methods, with the bottom element always prevailing. Overlap<\/strong> mode employs Display<\/strong> method at half intensity on hues lighter than 50% gray, and utilizes Multiply<\/strong> method at half intensity on hues darker than 50% gray. 50% gray itself becomes transparent.\u00a0<\/p>\n

      An alternative approach to understanding how Overlap <\/strong>method behaves is to consider how it shifts mid tones. Darker top element hues shift mid tones to darker shades, while lighter top element hues shift mid tones to brighter shades.<\/p>\n

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

      Gentle light<\/h4>\n

      Gentle Light <\/strong>method functions similarly to Overlap<\/strong> method. It applies either a dimming or brightening effect based on the brightness values, but in a subtler manner. You can perceive Gentle light<\/strong> method as a milder version of Overlap<\/strong> method, without the stark contrast. The impact is akin to shining a diffused illumination on a background.<\/p>\n

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

      Hard light<\/h4>\n

      Hard light<\/strong> method merges Multiply<\/strong> andDisplay<\/strong> modes using the luminance values of the top element colors to perform its computations. The outcomes with Intense light<\/strong> mode have the potential to be strong. This creates an impact similar to directing a strong spotlight onto a background. To optimize the results with this blending mode, consider reducing the opacity of your element.<\/p>\n

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

      Differentiated modes<\/h3>\n

      Overlay modes in the Differentiated category inspect disparities between the upper and lower element colors to generate the outcome.<\/p>\n

      Discrepancy<\/h4>\n

      Contrast<\/strong> mode deducts the dimmer color of the elements from the brighter one. White inverts the hues of the lower element, black results in no alteration, and dim grays introduce a slight darkening impact.<\/p>\n

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

      Exclusion<\/h4>\n

      Exception<\/strong> mode generates a result akin to yet less intense compared to Discrepancy<\/strong> mode. White inverts the hues of the lower element, black results in no alteration, and dim grays introduce a slight darkening impact.<\/p>\n

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

      Unified modes<\/h3>\n

      Modes in the Unified set utilize different amalgamations of the core color constituents (hint, intensity, and luminance) to craft the ultimate outcome.<\/p>\n

      Hint<\/h4>\n

      Hint<\/strong> mode produces a concluding color possessing the hint of the upper element\u2019s color, while utilizing the intensity and brilliance of the lower element\u2019s color. You can leverage Hint<\/strong> mode to modify hints in your upper element while sticking to the tones and saturation of the lower element.<\/p>\n

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

      Magnitude<\/h4>\n

      Magnitude<\/strong> mode yields a final color containing the intensity of the upper element\u2019s color, while utilizing the hint and brilliance of the lower element\u2019s color. Utter gray tones, having no intensity, will not exhibit any effect.<\/p>\n

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

      Shade<\/h4>\n

      Shade<\/strong> mode leads to a concluding color containing the hint and intensity of the upper element\u2019s color, while utilizing the brilliance of the lower element\u2019s color. This safeguards the grayscale levels and is beneficial for tinting monochromatic upper elements.<\/p>\n

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

      Radiance<\/h4>\n

      Radiance<\/strong> mode\u2019s final color contains the brilliance of the upper element\u2019s color while utilizing the hint and intensity of the lower element\u2019s color. This mode generates the opposite effect of Shade<\/strong> mode.<\/p>\n

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

      How to implement a blending mode to an element<\/h2>\n

      By default, the blending mode for elements is designated as Normal<\/strong>. <\/p>\n

      To preview and attach a blending mode<\/strong> to an element on the canvas:<\/p>\n

        \n
      1. Choose your element<\/li>\n
      2. Access the Style<\/strong>panel<\/strong> > Impacts <\/strong>> Blending<\/strong><\/li>\n
      3. Tap the Blending<\/strong> dropdown selection<\/li>\n
      4. Hover<\/strong> above any of the blending modes to experience them live on your element<\/li>\n
      5. Select your blending mode<\/strong> to implement it to your element<\/li>\n<\/ol>\n
        \n
        \"The<\/div>\n<\/figure>\n
        \n
        \"The<\/div>\n<\/figure>\n

        Extra references:<\/strong> Find out more about the Style panel.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Dynamically control how your stacked elements\u2019 colors blend together with blending modes.","protected":false},"author":2,"featured_media":5222,"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-5009","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\/5009","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=5009"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5009\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5227"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}