2 files changed, 9 insertions, 0 deletions

diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 1d6e2dc..eed30e8 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -73,6 +73,14 @@
                                         }
                                 }
 
+                                @include bem.elem('highlight') {
+                                        background-image: linear-gradient(to top,
+                                        transparent                                        props.get(vars.$bg-start),
+                                        props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start),
+                                        props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end),
+                                        transparent                                        props.get(vars.$bg-end));
+                                }
+
                                 @include bem.modifier('display') {      
                                         @each $mod, $value in vars.$sizes {
                                                 @include bem.modifier($mod) {
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index cf07488..c7c08a6 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -161,6 +161,7 @@ $static-themes: props.def(--o-heading, (), 'color');
 
         $static-themes: props.merge($static-themes, (
                 $heading-theme: (
+                        --bg-color:   props.get(core.$transparent-colors, $theme, --200),
                         --text-color: props.get(core.$transparent-colors, $theme, --900),
 
                         --xxl: (