{"id":86733,"date":"2026-09-30T20:54:57","date_gmt":"2026-09-30T20:54:57","guid":{"rendered":"https:\/\/demos.restored316.com\/creator-cloud\/?post_type=kadence_cloud&#038;p=86733"},"modified":"2026-09-30T20:54:58","modified_gmt":"2026-09-30T20:54:58","slug":"background-color-shift","status":"publish","type":"kadence_cloud","link":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/background-color-shift\/","title":{"rendered":"Background color shift"},"content":{"rendered":"<style>.kb-row-layout-id86733_07c9c2-31 > .kt-row-column-wrap{align-content:center;}:where(.kb-row-layout-id86733_07c9c2-31 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}.kb-row-layout-id86733_07c9c2-31 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:var( --global-content-width, 1290px );padding-left:var(--global-content-edge-padding);padding-right:var(--global-content-edge-padding);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);min-height:50vh;grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id86733_07c9c2-31 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id86733_07c9c2-31 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id86733_07c9c2-31 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id86733_07c9c2-31 alignfull has-theme-palette8-background-color kt-row-has-bg cc-bg-shift wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-middle kb-theme-content-width\">\n<style>.kadence-column86733_6f43df-e7 > .kt-inside-inner-col,.kadence-column86733_6f43df-e7 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column86733_6f43df-e7 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column86733_6f43df-e7 > .kt-inside-inner-col{flex-direction:column;}.kadence-column86733_6f43df-e7 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column86733_6f43df-e7 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column86733_6f43df-e7{position:relative;}@media all and (max-width: 1024px){.kadence-column86733_6f43df-e7 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column86733_6f43df-e7 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column86733_6f43df-e7\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading86733_6dbadb-b1, .wp-block-kadence-advancedheading.kt-adv-heading86733_6dbadb-b1[data-kb-block=\"kb-adv-heading86733_6dbadb-b1\"]{text-align:center;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading86733_6dbadb-b1 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading86733_6dbadb-b1[data-kb-block=\"kb-adv-heading86733_6dbadb-b1\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading86733_6dbadb-b1 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading86733_6dbadb-b1[data-kb-block=\"kb-adv-heading86733_6dbadb-b1\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading86733_6dbadb-b1 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading86733_6dbadb-b1\">Color Shift<\/h2>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id86733_dcbd03-ee > .kt-row-column-wrap{align-content:center;}:where(.kb-row-layout-id86733_dcbd03-ee > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}.kb-row-layout-id86733_dcbd03-ee > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:var( --global-content-width, 1290px );padding-left:var(--global-content-edge-padding);padding-right:var(--global-content-edge-padding);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);min-height:50vh;grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id86733_dcbd03-ee > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id86733_dcbd03-ee > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id86733_dcbd03-ee > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id86733_dcbd03-ee alignfull has-theme-palette2-background-color kt-row-has-bg cc-bg-shift wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-middle kb-theme-content-width\">\n<style>.kadence-column86733_12f477-89 > .kt-inside-inner-col,.kadence-column86733_12f477-89 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column86733_12f477-89 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column86733_12f477-89 > .kt-inside-inner-col{flex-direction:column;}.kadence-column86733_12f477-89 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column86733_12f477-89 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column86733_12f477-89{position:relative;}@media all and (max-width: 1024px){.kadence-column86733_12f477-89 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column86733_12f477-89 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column86733_12f477-89\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading86733_b8413f-dd, .wp-block-kadence-advancedheading.kt-adv-heading86733_b8413f-dd[data-kb-block=\"kb-adv-heading86733_b8413f-dd\"]{text-align:center;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading86733_b8413f-dd mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading86733_b8413f-dd[data-kb-block=\"kb-adv-heading86733_b8413f-dd\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading86733_b8413f-dd img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading86733_b8413f-dd[data-kb-block=\"kb-adv-heading86733_b8413f-dd\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading86733_b8413f-dd wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading86733_b8413f-dd\">Place Any Content You&#8217;d like within each frame<\/h2>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id86733_41cae4-c5 > .kt-row-column-wrap{align-content:center;}:where(.kb-row-layout-id86733_41cae4-c5 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}.kb-row-layout-id86733_41cae4-c5 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:var( --global-content-width, 1290px );padding-left:var(--global-content-edge-padding);padding-right:var(--global-content-edge-padding);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);min-height:50vh;grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id86733_41cae4-c5 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id86733_41cae4-c5 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id86733_41cae4-c5 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id86733_41cae4-c5 alignfull has-theme-palette8-background-color kt-row-has-bg cc-bg-shift wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-middle kb-theme-content-width\">\n<style>.kadence-column86733_775f73-5c > .kt-inside-inner-col,.kadence-column86733_775f73-5c > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column86733_775f73-5c > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column86733_775f73-5c > .kt-inside-inner-col{flex-direction:column;}.kadence-column86733_775f73-5c > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column86733_775f73-5c > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column86733_775f73-5c{position:relative;}@media all and (max-width: 1024px){.kadence-column86733_775f73-5c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column86733_775f73-5c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column86733_775f73-5c\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading86733_40d928-88, .wp-block-kadence-advancedheading.kt-adv-heading86733_40d928-88[data-kb-block=\"kb-adv-heading86733_40d928-88\"]{text-align:center;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading86733_40d928-88 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading86733_40d928-88[data-kb-block=\"kb-adv-heading86733_40d928-88\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading86733_40d928-88 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading86733_40d928-88[data-kb-block=\"kb-adv-heading86733_40d928-88\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading86733_40d928-88 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading86733_40d928-88\">And it slowly changes shades.  You can control the colors.<\/h2>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id86733_93c00c-f0 > .kt-row-column-wrap{align-content:center;}:where(.kb-row-layout-id86733_93c00c-f0 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}.kb-row-layout-id86733_93c00c-f0 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:var( --global-content-width, 1290px );padding-left:var(--global-content-edge-padding);padding-right:var(--global-content-edge-padding);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);min-height:50vh;grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id86733_93c00c-f0 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id86733_93c00c-f0 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id86733_93c00c-f0 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id86733_93c00c-f0 alignfull has-theme-palette2-background-color kt-row-has-bg cc-bg-shift wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-middle kb-theme-content-width\">\n<style>.kadence-column86733_a4732a-52 > .kt-inside-inner-col,.kadence-column86733_a4732a-52 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column86733_a4732a-52 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column86733_a4732a-52 > .kt-inside-inner-col{flex-direction:column;}.kadence-column86733_a4732a-52 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column86733_a4732a-52 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column86733_a4732a-52{position:relative;}@media all and (max-width: 1024px){.kadence-column86733_a4732a-52 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column86733_a4732a-52 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column86733_a4732a-52\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading86733_297f09-38, .wp-block-kadence-advancedheading.kt-adv-heading86733_297f09-38[data-kb-block=\"kb-adv-heading86733_297f09-38\"]{text-align:center;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading86733_297f09-38 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading86733_297f09-38[data-kb-block=\"kb-adv-heading86733_297f09-38\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading86733_297f09-38 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading86733_297f09-38[data-kb-block=\"kb-adv-heading86733_297f09-38\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading86733_297f09-38 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading86733_297f09-38\">You can control the colors as well.<\/h2>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kadence-column86733_aa28a4-1c > .kt-inside-inner-col{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kadence-column86733_aa28a4-1c > .kt-inside-inner-col,.kadence-column86733_aa28a4-1c > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column86733_aa28a4-1c > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column86733_aa28a4-1c > .kt-inside-inner-col{flex-direction:column;}.kadence-column86733_aa28a4-1c > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column86733_aa28a4-1c > .kt-inside-inner-col{background-color:var(--global-palette15, #3182CE);}.kadence-column86733_aa28a4-1c > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column86733_aa28a4-1c{position:relative;}@media all and (max-width: 1024px){.kadence-column86733_aa28a4-1c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column86733_aa28a4-1c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column86733_aa28a4-1c kvs-lg-false kvs-md-false kvs-sm-false\"><div class=\"kt-inside-inner-col\">\n<p class=\"wp-block-paragraph\">Place the below code in your header script area this delete this block.<\/p>\n\n\n\n<pre class=\"wp-block-code has-theme-palette-15-background-color has-background\"><code>&lt;script>\/* Background color shift *\/\n(function () {\n  var TRIGGER = 0.5; \/\/ colors change as a section reaches this spot (0.5 = middle of the screen)\n  var BLEND = 0.35;  \/\/ how gradual the blend is (0.35 = over 35% of a screen of scrolling)\n\n  var rows = &#91;];\n  var ticking = false;\n  var lastColor = '';\n\n  \/\/ Turn \"rgb(248, 247, 244)\" into &#91;248, 247, 244, 1]\n  function parseColor(str) {\n    var m = str.match(\/&#91;\\d.]+\/g);\n    if (!m || m.length &lt; 3) return null;\n    var a = m.length > 3 ? parseFloat(m&#91;3]) : 1;\n    if (a === 0) return null; \/\/ transparent = no color set\n    return &#91;parseFloat(m&#91;0]), parseFloat(m&#91;1]), parseFloat(m&#91;2]), a];\n  }\n\n  function toString(c) {\n    return 'rgba(' + Math.round(c&#91;0]) + ',' + Math.round(c&#91;1]) + ',' + Math.round(c&#91;2]) + ',' + c&#91;3].toFixed(3) + ')';\n  }\n\n  function mix(a, b, t) {\n    return &#91;\n      a&#91;0] + (b&#91;0] - a&#91;0]) * t,\n      a&#91;1] + (b&#91;1] - a&#91;1]) * t,\n      a&#91;2] + (b&#91;2] - a&#91;2]) * t,\n      a&#91;3] + (b&#91;3] - a&#91;3]) * t\n    ];\n  }\n\n  function smooth(t) {\n    return t * t * (3 - 2 * t); \/\/ gentle ease in and out\n  }\n\n  \/\/ Read each row's own Kadence background color and where it sits on the page\n  function measure() {\n    rows.forEach(function (r) {\n      r.el.style.backgroundColor = ''; \/\/ let Kadence's color show so we can read it\n    });\n\n    var previous = null;\n    rows.forEach(function (r) {\n      var c = parseColor(window.getComputedStyle(r.el).backgroundColor);\n      r.color = c || previous || &#91;255, 255, 255, 1]; \/\/ no color set? borrow the one before\n      previous = r.color;\n      r.top = r.el.getBoundingClientRect().top + window.scrollY;\n    });\n\n    lastColor = '';\n    update();\n  }\n\n  function update() {\n    var vh = window.innerHeight;\n    var y = window.scrollY + vh * TRIGGER;\n    var blend = vh * BLEND;\n    var color = rows&#91;0].color;\n\n    for (var i = 1; i &lt; rows.length; i++) {\n      var start = rows&#91;i].top - blend;\n      if (y &lt;= start) break;\n      var t = Math.min(1, (y - start) \/ blend);\n      color = mix(rows&#91;i - 1].color, rows&#91;i].color, smooth(t));\n    }\n\n    var str = toString(color);\n    if (str !== lastColor) {\n      rows.forEach(function (r) {\n        r.el.style.backgroundColor = str;\n      });\n      lastColor = str;\n    }\n    ticking = false;\n  }\n\n  function onScroll() {\n    if (!ticking) {\n      ticking = true;\n      requestAnimationFrame(update);\n    }\n  }\n\n  function init() {\n    document.querySelectorAll('.cc-bg-shift').forEach(function (el) {\n      rows.push({ el: el, color: null, top: 0 });\n    });\n    if (rows.length &lt; 2) return;\n\n    measure(); \/\/ correct color right away on load\n    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('resize', measure);\n    window.addEventListener('load', measure); \/\/ re-measure after images settle\n\n    if ('ResizeObserver' in window) {\n      new ResizeObserver(measure).observe(document.body);\n    }\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n})();&lt;\/script><\/code><\/pre>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Color Shift Place Any Content You&#8217;d like within each frame And it slowly changes shades. You can control the colors. You can control the colors as well. Place the below code in your header script area this delete this block.<\/p>\n","protected":false},"author":1,"featured_media":83029,"menu_order":0,"template":"","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"<script>\/* Background color shift *\/\n(function () {\n  var TRIGGER = 0.5; \/\/ colors change as a section reaches this spot (0.5 = middle of the screen)\n  var BLEND = 0.35;  \/\/ how gradual the blend is (0.35 = over 35% of a screen of scrolling)\n\n  var rows = [];\n  var ticking = false;\n  var lastColor = '';\n\n  \/\/ Turn \"rgb(248, 247, 244)\" into [248, 247, 244, 1]\n  function parseColor(str) {\n    var m = str.match(\/[\\d.]+\/g);\n    if (!m || m.length < 3) return null;\n    var a = m.length > 3 ? parseFloat(m[3]) : 1;\n    if (a === 0) return null; \/\/ transparent = no color set\n    return [parseFloat(m[0]), parseFloat(m[1]), parseFloat(m[2]), a];\n  }\n\n  function toString(c) {\n    return 'rgba(' + Math.round(c[0]) + ',' + Math.round(c[1]) + ',' + Math.round(c[2]) + ',' + c[3].toFixed(3) + ')';\n  }\n\n  function mix(a, b, t) {\n    return [\n      a[0] + (b[0] - a[0]) * t,\n      a[1] + (b[1] - a[1]) * t,\n      a[2] + (b[2] - a[2]) * t,\n      a[3] + (b[3] - a[3]) * t\n    ];\n  }\n\n  function smooth(t) {\n    return t * t * (3 - 2 * t); \/\/ gentle ease in and out\n  }\n\n  \/\/ Read each row's own Kadence background color and where it sits on the page\n  function measure() {\n    rows.forEach(function (r) {\n      r.el.style.backgroundColor = ''; \/\/ let Kadence's color show so we can read it\n    });\n\n    var previous = null;\n    rows.forEach(function (r) {\n      var c = parseColor(window.getComputedStyle(r.el).backgroundColor);\n      r.color = c || previous || [255, 255, 255, 1]; \/\/ no color set? borrow the one before\n      previous = r.color;\n      r.top = r.el.getBoundingClientRect().top + window.scrollY;\n    });\n\n    lastColor = '';\n    update();\n  }\n\n  function update() {\n    var vh = window.innerHeight;\n    var y = window.scrollY + vh * TRIGGER;\n    var blend = vh * BLEND;\n    var color = rows[0].color;\n\n    for (var i = 1; i < rows.length; i++) {\n      var start = rows[i].top - blend;\n      if (y <= start) break;\n      var t = Math.min(1, (y - start) \/ blend);\n      color = mix(rows[i - 1].color, rows[i].color, smooth(t));\n    }\n\n    var str = toString(color);\n    if (str !== lastColor) {\n      rows.forEach(function (r) {\n        r.el.style.backgroundColor = str;\n      });\n      lastColor = str;\n    }\n    ticking = false;\n  }\n\n  function onScroll() {\n    if (!ticking) {\n      ticking = true;\n      requestAnimationFrame(update);\n    }\n  }\n\n  function init() {\n    document.querySelectorAll('.cc-bg-shift').forEach(function (el) {\n      rows.push({ el: el, color: null, top: 0 });\n    });\n    if (rows.length < 2) return;\n\n    measure(); \/\/ correct color right away on load\n    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('resize', measure);\n    window.addEventListener('load', measure); \/\/ re-measure after images settle\n\n    if ('ResizeObserver' in window) {\n      new ResizeObserver(measure).observe(document.body);\n    }\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n})();<\/script>","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_monsterinsights_skip_tracking":false,"_wp_convertkit_post_meta":{"form":"-1","landing_page":"0","tag":"0","restrict_content":"0"},"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"kadence-cloud-collections":[105],"kadence-cloud-categories":[243,106,267],"kadence-cloud-keywords":[],"class_list":["post-86733","kadence_cloud","type-kadence_cloud","status-publish","has-post-thumbnail","hentry","kadence-cloud-collections-website-builders","kadence-cloud-categories-new","kadence-cloud-categories-website-builders","kadence-cloud-categories-movement"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Background color shift - Creator Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/background-color-shift\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Background color shift - Creator Cloud\" \/>\n<meta property=\"og:description\" content=\"Color Shift Place Any Content You&#8217;d like within each frame And it slowly changes shades. You can control the colors. You can control the colors as well. Place the below code in your header script area this delete this block.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/background-color-shift\/\" \/>\n<meta property=\"og:site_name\" content=\"Creator Cloud\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-30T20:54:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/CCDemo-Teal-Pattern.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1801\" \/>\n\t<meta property=\"og:image:height\" content=\"1801\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/cloud\\\/background-color-shift\\\/\",\"url\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/cloud\\\/background-color-shift\\\/\",\"name\":\"Background color shift - Creator Cloud\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/cloud\\\/background-color-shift\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/cloud\\\/background-color-shift\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/wp-content\\\/uploads\\\/sites\\\/64\\\/2025\\\/01\\\/CCDemo-Teal-Pattern.png\",\"datePublished\":\"2026-09-30T20:54:57+00:00\",\"dateModified\":\"2026-09-30T20:54:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/cloud\\\/background-color-shift\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/cloud\\\/background-color-shift\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/cloud\\\/background-color-shift\\\/#primaryimage\",\"url\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/wp-content\\\/uploads\\\/sites\\\/64\\\/2025\\\/01\\\/CCDemo-Teal-Pattern.png\",\"contentUrl\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/wp-content\\\/uploads\\\/sites\\\/64\\\/2025\\\/01\\\/CCDemo-Teal-Pattern.png\",\"width\":1801,\"height\":1801,\"caption\":\"Name of Source\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/cloud\\\/background-color-shift\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Background color shift\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/#website\",\"url\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/\",\"name\":\"Creator Cloud\",\"description\":\"The Block Collection That Will Help You Design Blog Posts That Convert\",\"publisher\":{\"@id\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/#organization\",\"name\":\"Creator Cloud\",\"url\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/wp-content\\\/uploads\\\/sites\\\/64\\\/2025\\\/01\\\/CC-Logo-Horizontal-1.png\",\"contentUrl\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/wp-content\\\/uploads\\\/sites\\\/64\\\/2025\\\/01\\\/CC-Logo-Horizontal-1.png\",\"width\":1158,\"height\":182,\"caption\":\"Creator Cloud\"},\"image\":{\"@id\":\"https:\\\/\\\/demos.restored316.com\\\/creator-cloud\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Background color shift - Creator Cloud","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:\/\/demos.restored316.com\/creator-cloud\/cloud\/background-color-shift\/","og_locale":"en_US","og_type":"article","og_title":"Background color shift - Creator Cloud","og_description":"Color Shift Place Any Content You&#8217;d like within each frame And it slowly changes shades. You can control the colors. You can control the colors as well. Place the below code in your header script area this delete this block.","og_url":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/background-color-shift\/","og_site_name":"Creator Cloud","article_modified_time":"2026-09-30T20:54:58+00:00","og_image":[{"width":1801,"height":1801,"url":"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/CCDemo-Teal-Pattern.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/background-color-shift\/","url":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/background-color-shift\/","name":"Background color shift - Creator Cloud","isPartOf":{"@id":"https:\/\/demos.restored316.com\/creator-cloud\/#website"},"primaryImageOfPage":{"@id":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/background-color-shift\/#primaryimage"},"image":{"@id":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/background-color-shift\/#primaryimage"},"thumbnailUrl":"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/CCDemo-Teal-Pattern.png","datePublished":"2026-09-30T20:54:57+00:00","dateModified":"2026-09-30T20:54:58+00:00","breadcrumb":{"@id":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/background-color-shift\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/demos.restored316.com\/creator-cloud\/cloud\/background-color-shift\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/background-color-shift\/#primaryimage","url":"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/CCDemo-Teal-Pattern.png","contentUrl":"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/CCDemo-Teal-Pattern.png","width":1801,"height":1801,"caption":"Name of Source"},{"@type":"BreadcrumbList","@id":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/background-color-shift\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/demos.restored316.com\/creator-cloud\/"},{"@type":"ListItem","position":2,"name":"Background color shift"}]},{"@type":"WebSite","@id":"https:\/\/demos.restored316.com\/creator-cloud\/#website","url":"https:\/\/demos.restored316.com\/creator-cloud\/","name":"Creator Cloud","description":"The Block Collection That Will Help You Design Blog Posts That Convert","publisher":{"@id":"https:\/\/demos.restored316.com\/creator-cloud\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/demos.restored316.com\/creator-cloud\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/demos.restored316.com\/creator-cloud\/#organization","name":"Creator Cloud","url":"https:\/\/demos.restored316.com\/creator-cloud\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demos.restored316.com\/creator-cloud\/#\/schema\/logo\/image\/","url":"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/CC-Logo-Horizontal-1.png","contentUrl":"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/CC-Logo-Horizontal-1.png","width":1158,"height":182,"caption":"Creator Cloud"},"image":{"@id":"https:\/\/demos.restored316.com\/creator-cloud\/#\/schema\/logo\/image\/"}}]}},"taxonomy_info":{"kadence-cloud-collections":[{"value":105,"label":"Website Builders"}],"kadence-cloud-categories":[{"value":243,"label":"**NEW**"},{"value":106,"label":"WEBSITE BUILDERS"},{"value":267,"label":"- Movement"}]},"featured_image_src_large":["https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/CCDemo-Teal-Pattern-1024x1024.png",1024,1024,true],"author_info":{"display_name":"Lauren","author_link":"https:\/\/demos.restored316.com\/creator-cloud\/author\/r316demos\/"},"comment_info":"","_links":{"self":[{"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/cloud_library\/86733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/cloud_library"}],"about":[{"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/types\/kadence_cloud"}],"author":[{"embeddable":true,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":8,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/cloud_library\/86733\/revisions"}],"predecessor-version":[{"id":86741,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/cloud_library\/86733\/revisions\/86741"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/media\/83029"}],"wp:attachment":[{"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/media?parent=86733"}],"wp:term":[{"taxonomy":"kadence-cloud-collections","embeddable":true,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/kadence-cloud-collections?post=86733"},{"taxonomy":"kadence-cloud-categories","embeddable":true,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/kadence-cloud-categories?post=86733"},{"taxonomy":"kadence-cloud-keywords","embeddable":true,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/kadence-cloud-keywords?post=86733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}