Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h2 class="title-bg" style="" data-background="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzA5Ljk2MSIgaGVpZ2h0PSIzODAuODU5IiB2aWV3Qm94PSIwIDAgMjcwOS45NjEgMzgwLjg1OSI+PHBhdGggZD0iTTIyLjQ2MS0xNzdxMC05NC4yMzgsNTAuNTM3LTE0NS4yNjRRMTE2Ljk0My0zNjYuNywxODQuODE0LTM2Ni43cTkwLjgyLDAsMTMyLjgxMyw1OS41NywyMy4xOTMsMzMuNDQ3LDI0LjksNjcuMTM5aC03NS4ycS03LjMyNC0yNS44NzktMTguOC0zOS4wNjItMjAuNTA4LTIzLjQzNy02MC43OTEtMjMuNDM3LTQxLjAxNiwwLTY0LjcsMzMuMDgxVDk5LjM2NS0xNzUuNzgxcTAsNjAuNTQ3LDI1LjAyNCw5MC43dDYzLjYsMzAuMTUxcTM5LjU1MSwwLDYwLjMtMjUuODc5LDExLjQ3NS0xMy45MTYsMTkuMDQzLTQxLjc0OEgzNDEuOHEtOS43NjYsNTguODM4LTQ5LjkyNyw5NS43VDE4OC45NjUsMTAuMDFxLTc3LjYzNywwLTEyMi4wNy00OS44UTIyLjQ2MS04OS44NDQsMjIuNDYxLTE3N1pNNTU4LjM1LTUzLjcxMXE0NC42NzgsMCw3MC45MjMtMzIuOTU5dDI2LjI0NS05My43NXEwLTYwLjU0Ny0yNi4yNDUtOTMuNjI4VDU1OC4zNS0zMDcuMTI5cS00NC42NzgsMC03MS4yODksMzIuOTU5dC0yNi42MTEsOTMuNzVxMCw2MC43OTEsMjYuNjExLDkzLjc1VDU1OC4zNS01My43MTFaTTczMC43MTMtMTgwLjQycTAsOTYuOTI0LTU0LjQ0MywxNDguNDM4UTYzNS41LDEwLjAxLDU1OC4zNSwxMC4wMVQ0NDAuNDMtMzEuOTgyUTM4NS43NDItODMuNSwzODUuNzQyLTE4MC40MnEwLTk4Ljg3Nyw1NC42ODgtMTQ4LjQzN1E0ODEuMi0zNzAuODUsNTU4LjM1LTM3MC44NXQxMTcuOTIsNDEuOTkyUTczMC43MTMtMjc5LjMsNzMwLjcxMy0xODAuNDJabTU2LjE1Mi0xNzkuNDQzaDc4Ljg1N2wxNDMuMzExLDI1MS4yMjFWLTM1OS44NjNIMTA3OS4xVjBoLTc1LjJMODU2LjkzNC0yNTUuNjE1VjBINzg2Ljg2NVptNjIzLjc3OSwwdjYzLjcyMUgxMzAyLjk3OVYwaC03NS42ODRWLTI5Ni4xNDNIMTExOS4xNDF2LTYzLjcyMVpNMTcyMC43LTI5Ni4xNDNoLTE5MC40M3Y3Ni40MTZoMTc0Ljh2NjIuNWgtMTc0LjhWLTY0LjdoMTk5LjIxOVYwSDE0NTYuNzg3Vi0zNTkuODYzSDE3MjAuN1ptNjYuMTYyLTYzLjcyMWg3OC44NTdsMTQzLjMxMSwyNTEuMjIxVi0zNTkuODYzSDIwNzkuMVYwaC03NS4yTDE4NTYuOTM0LTI1NS42MTVWMGgtNzAuMDY4Wm02MjMuNzc5LDB2NjMuNzIxSDIzMDIuOTc5VjBoLTc1LjY4NFYtMjk2LjE0M0gyMTE5LjE0MXYtNjMuNzIxWm05OC4zODksMjQ4Ljc3OXEzLjQxOCwyNC42NTgsMTMuNDI4LDM2Ljg2NVEyNTQwLjc3MS01MiwyNTg1LjIwNS01MnEyNi42MTEsMCw0My4yMTMtNS44NTksMzEuNDk0LTExLjIzLDMxLjQ5NC00MS43NDgsMC0xNy44MjItMTUuNjI1LTI3LjU4OC0xNS42MjUtOS41MjEtNDkuMDcyLTE2Ljg0NmwtMzguMDg2LTguNTQ1cS01Ni4xNTItMTIuNy03Ny42MzctMjcuNTg4LTM2LjM3Ny0yNC45LTM2LjM3Ny03Ny44ODEsMC00OC4zNCwzNS4xNTYtODAuMzIydDEwMy4yNzEtMzEuOTgycTU2Ljg4NSwwLDk3LjA0NiwzMC4xNTF0NDIuMTE0LDg3LjUyNGgtNzIuMjY2cS0xLjk1My0zMi40NzEtMjguMzItNDYuMTQzLTE3LjU3OC05LjAzMy00My43LTkuMDMzLTI5LjA1MywwLTQ2LjM4NywxMS43MTlUMjUxMi43LTI2My40MjhxMCwxOS4yODcsMTcuMDksMjguODA5LDEwLjk4Niw2LjM0OCw0Ni44NzUsMTQuODkzbDYyLjAxMiwxNC44OTNxNDAuNzcxLDkuNzY2LDYxLjUyMywyNi4xMjMsMzIuMjI3LDI1LjM5MSwzMi4yMjcsNzMuNDg2LDAsNDkuMzE2LTM3LjcyLDgxLjkwOVQyNTg4LjEzNSw5LjI3N3EtNzAuMzEyLDAtMTEwLjYtMzIuMXQtNDAuMjgzLTg4LjI1N1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMi40NjEgMzcwLjg1KSIgZmlsbD0iI2VkZWRlZCIvPjwvc3ZnPg==">content</h2>

<h2 class="title-bg" style="" data-background="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzA5Ljk2MSIgaGVpZ2h0PSIzODAuODU5IiB2aWV3Qm94PSIwIDAgMjcwOS45NjEgMzgwLjg1OSI+PHBhdGggZD0iTTIyLjQ2MS0xNzdxMC05NC4yMzgsNTAuNTM3LTE0NS4yNjRRMTE2Ljk0My0zNjYuNywxODQuODE0LTM2Ni43cTkwLjgyLDAsMTMyLjgxMyw1OS41NywyMy4xOTMsMzMuNDQ3LDI0LjksNjcuMTM5aC03NS4ycS03LjMyNC0yNS44NzktMTguOC0zOS4wNjItMjAuNTA4LTIzLjQzNy02MC43OTEtMjMuNDM3LTQxLjAxNiwwLTY0LjcsMzMuMDgxVDk5LjM2NS0xNzUuNzgxcTAsNjAuNTQ3LDI1LjAyNCw5MC43dDYzLjYsMzAuMTUxcTM5LjU1MSwwLDYwLjMtMjUuODc5LDExLjQ3NS0xMy45MTYsMTkuMDQzLTQxLjc0OEgzNDEuOHEtOS43NjYsNTguODM4LTQ5LjkyNyw5NS43VDE4OC45NjUsMTAuMDFxLTc3LjYzNywwLTEyMi4wNy00OS44UTIyLjQ2MS04OS44NDQsMjIuNDYxLTE3N1pNNTU4LjM1LTUzLjcxMXE0NC42NzgsMCw3MC45MjMtMzIuOTU5dDI2LjI0NS05My43NXEwLTYwLjU0Ny0yNi4yNDUtOTMuNjI4VDU1OC4zNS0zMDcuMTI5cS00NC42NzgsMC03MS4yODksMzIuOTU5dC0yNi42MTEsOTMuNzVxMCw2MC43OTEsMjYuNjExLDkzLjc1VDU1OC4zNS01My43MTFaTTczMC43MTMtMTgwLjQycTAsOTYuOTI0LTU0LjQ0MywxNDguNDM4UTYzNS41LDEwLjAxLDU1OC4zNSwxMC4wMVQ0NDAuNDMtMzEuOTgyUTM4NS43NDItODMuNSwzODUuNzQyLTE4MC40MnEwLTk4Ljg3Nyw1NC42ODgtMTQ4LjQzN1E0ODEuMi0zNzAuODUsNTU4LjM1LTM3MC44NXQxMTcuOTIsNDEuOTkyUTczMC43MTMtMjc5LjMsNzMwLjcxMy0xODAuNDJabTU2LjE1Mi0xNzkuNDQzaDc4Ljg1N2wxNDMuMzExLDI1MS4yMjFWLTM1OS44NjNIMTA3OS4xVjBoLTc1LjJMODU2LjkzNC0yNTUuNjE1VjBINzg2Ljg2NVptNjIzLjc3OSwwdjYzLjcyMUgxMzAyLjk3OVYwaC03NS42ODRWLTI5Ni4xNDNIMTExOS4xNDF2LTYzLjcyMVpNMTcyMC43LTI5Ni4xNDNoLTE5MC40M3Y3Ni40MTZoMTc0Ljh2NjIuNWgtMTc0LjhWLTY0LjdoMTk5LjIxOVYwSDE0NTYuNzg3Vi0zNTkuODYzSDE3MjAuN1ptNjYuMTYyLTYzLjcyMWg3OC44NTdsMTQzLjMxMSwyNTEuMjIxVi0zNTkuODYzSDIwNzkuMVYwaC03NS4yTDE4NTYuOTM0LTI1NS42MTVWMGgtNzAuMDY4Wm02MjMuNzc5LDB2NjMuNzIxSDIzMDIuOTc5VjBoLTc1LjY4NFYtMjk2LjE0M0gyMTE5LjE0MXYtNjMuNzIxWm05OC4zODksMjQ4Ljc3OXEzLjQxOCwyNC42NTgsMTMuNDI4LDM2Ljg2NVEyNTQwLjc3MS01MiwyNTg1LjIwNS01MnEyNi42MTEsMCw0My4yMTMtNS44NTksMzEuNDk0LTExLjIzLDMxLjQ5NC00MS43NDgsMC0xNy44MjItMTUuNjI1LTI3LjU4OC0xNS42MjUtOS41MjEtNDkuMDcyLTE2Ljg0NmwtMzguMDg2LTguNTQ1cS01Ni4xNTItMTIuNy03Ny42MzctMjcuNTg4LTM2LjM3Ny0yNC45LTM2LjM3Ny03Ny44ODEsMC00OC4zNCwzNS4xNTYtODAuMzIydDEwMy4yNzEtMzEuOTgycTU2Ljg4NSwwLDk3LjA0NiwzMC4xNTF0NDIuMTE0LDg3LjUyNGgtNzIuMjY2cS0xLjk1My0zMi40NzEtMjguMzItNDYuMTQzLTE3LjU3OC05LjAzMy00My43LTkuMDMzLTI5LjA1MywwLTQ2LjM4NywxMS43MTlUMjUxMi43LTI2My40MjhxMCwxOS4yODcsMTcuMDksMjguODA5LDEwLjk4Niw2LjM0OCw0Ni44NzUsMTQuODkzbDYyLjAxMiwxNC44OTNxNDAuNzcxLDkuNzY2LDYxLjUyMywyNi4xMjMsMzIuMjI3LDI1LjM5MSwzMi4yMjcsNzMuNDg2LDAsNDkuMzE2LTM3LjcyLDgxLjkwOVQyNTg4LjEzNSw5LjI3N3EtNzAuMzEyLDAtMTEwLjYtMzIuMXQtNDAuMjgzLTg4LjI1N1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMi40NjEgMzcwLjg1KSIgZmlsbD0iI2VkZWRlZCIvPjwvc3ZnPg==">content</h2>

<h2 class="title-bg" style="" data-background="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzA5Ljk2MSIgaGVpZ2h0PSIzODAuODU5IiB2aWV3Qm94PSIwIDAgMjcwOS45NjEgMzgwLjg1OSI+PHBhdGggZD0iTTIyLjQ2MS0xNzdxMC05NC4yMzgsNTAuNTM3LTE0NS4yNjRRMTE2Ljk0My0zNjYuNywxODQuODE0LTM2Ni43cTkwLjgyLDAsMTMyLjgxMyw1OS41NywyMy4xOTMsMzMuNDQ3LDI0LjksNjcuMTM5aC03NS4ycS03LjMyNC0yNS44NzktMTguOC0zOS4wNjItMjAuNTA4LTIzLjQzNy02MC43OTEtMjMuNDM3LTQxLjAxNiwwLTY0LjcsMzMuMDgxVDk5LjM2NS0xNzUuNzgxcTAsNjAuNTQ3LDI1LjAyNCw5MC43dDYzLjYsMzAuMTUxcTM5LjU1MSwwLDYwLjMtMjUuODc5LDExLjQ3NS0xMy45MTYsMTkuMDQzLTQxLjc0OEgzNDEuOHEtOS43NjYsNTguODM4LTQ5LjkyNyw5NS43VDE4OC45NjUsMTAuMDFxLTc3LjYzNywwLTEyMi4wNy00OS44UTIyLjQ2MS04OS44NDQsMjIuNDYxLTE3N1pNNTU4LjM1LTUzLjcxMXE0NC42NzgsMCw3MC45MjMtMzIuOTU5dDI2LjI0NS05My43NXEwLTYwLjU0Ny0yNi4yNDUtOTMuNjI4VDU1OC4zNS0zMDcuMTI5cS00NC42NzgsMC03MS4yODksMzIuOTU5dC0yNi42MTEsOTMuNzVxMCw2MC43OTEsMjYuNjExLDkzLjc1VDU1OC4zNS01My43MTFaTTczMC43MTMtMTgwLjQycTAsOTYuOTI0LTU0LjQ0MywxNDguNDM4UTYzNS41LDEwLjAxLDU1OC4zNSwxMC4wMVQ0NDAuNDMtMzEuOTgyUTM4NS43NDItODMuNSwzODUuNzQyLTE4MC40MnEwLTk4Ljg3Nyw1NC42ODgtMTQ4LjQzN1E0ODEuMi0zNzAuODUsNTU4LjM1LTM3MC44NXQxMTcuOTIsNDEuOTkyUTczMC43MTMtMjc5LjMsNzMwLjcxMy0xODAuNDJabTU2LjE1Mi0xNzkuNDQzaDc4Ljg1N2wxNDMuMzExLDI1MS4yMjFWLTM1OS44NjNIMTA3OS4xVjBoLTc1LjJMODU2LjkzNC0yNTUuNjE1VjBINzg2Ljg2NVptNjIzLjc3OSwwdjYzLjcyMUgxMzAyLjk3OVYwaC03NS42ODRWLTI5Ni4xNDNIMTExOS4xNDF2LTYzLjcyMVpNMTcyMC43LTI5Ni4xNDNoLTE5MC40M3Y3Ni40MTZoMTc0Ljh2NjIuNWgtMTc0LjhWLTY0LjdoMTk5LjIxOVYwSDE0NTYuNzg3Vi0zNTkuODYzSDE3MjAuN1ptNjYuMTYyLTYzLjcyMWg3OC44NTdsMTQzLjMxMSwyNTEuMjIxVi0zNTkuODYzSDIwNzkuMVYwaC03NS4yTDE4NTYuOTM0LTI1NS42MTVWMGgtNzAuMDY4Wm02MjMuNzc5LDB2NjMuNzIxSDIzMDIuOTc5VjBoLTc1LjY4NFYtMjk2LjE0M0gyMTE5LjE0MXYtNjMuNzIxWm05OC4zODksMjQ4Ljc3OXEzLjQxOCwyNC42NTgsMTMuNDI4LDM2Ljg2NVEyNTQwLjc3MS01MiwyNTg1LjIwNS01MnEyNi42MTEsMCw0My4yMTMtNS44NTksMzEuNDk0LTExLjIzLDMxLjQ5NC00MS43NDgsMC0xNy44MjItMTUuNjI1LTI3LjU4OC0xNS42MjUtOS41MjEtNDkuMDcyLTE2Ljg0NmwtMzguMDg2LTguNTQ1cS01Ni4xNTItMTIuNy03Ny42MzctMjcuNTg4LTM2LjM3Ny0yNC45LTM2LjM3Ny03Ny44ODEsMC00OC4zNCwzNS4xNTYtODAuMzIydDEwMy4yNzEtMzEuOTgycTU2Ljg4NSwwLDk3LjA0NiwzMC4xNTF0NDIuMTE0LDg3LjUyNGgtNzIuMjY2cS0xLjk1My0zMi40NzEtMjguMzItNDYuMTQzLTE3LjU3OC05LjAzMy00My43LTkuMDMzLTI5LjA1MywwLTQ2LjM4NywxMS43MTlUMjUxMi43LTI2My40MjhxMCwxOS4yODcsMTcuMDksMjguODA5LDEwLjk4Niw2LjM0OCw0Ni44NzUsMTQuODkzbDYyLjAxMiwxNC44OTNxNDAuNzcxLDkuNzY2LDYxLjUyMywyNi4xMjMsMzIuMjI3LDI1LjM5MSwzMi4yMjcsNzMuNDg2LDAsNDkuMzE2LTM3LjcyLDgxLjkwOVQyNTg4LjEzNSw5LjI3N3EtNzAuMzEyLDAtMTEwLjYtMzIuMXQtNDAuMjgzLTg4LjI1N1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMi40NjEgMzcwLjg1KSIgZmlsbD0iI2VkZWRlZCIvPjwvc3ZnPg==">content</h2>

<h2 class="title-bg" style="" data-background="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzA5Ljk2MSIgaGVpZ2h0PSIzODAuODU5IiB2aWV3Qm94PSIwIDAgMjcwOS45NjEgMzgwLjg1OSI+PHBhdGggZD0iTTIyLjQ2MS0xNzdxMC05NC4yMzgsNTAuNTM3LTE0NS4yNjRRMTE2Ljk0My0zNjYuNywxODQuODE0LTM2Ni43cTkwLjgyLDAsMTMyLjgxMyw1OS41NywyMy4xOTMsMzMuNDQ3LDI0LjksNjcuMTM5aC03NS4ycS03LjMyNC0yNS44NzktMTguOC0zOS4wNjItMjAuNTA4LTIzLjQzNy02MC43OTEtMjMuNDM3LTQxLjAxNiwwLTY0LjcsMzMuMDgxVDk5LjM2NS0xNzUuNzgxcTAsNjAuNTQ3LDI1LjAyNCw5MC43dDYzLjYsMzAuMTUxcTM5LjU1MSwwLDYwLjMtMjUuODc5LDExLjQ3NS0xMy45MTYsMTkuMDQzLTQxLjc0OEgzNDEuOHEtOS43NjYsNTguODM4LTQ5LjkyNyw5NS43VDE4OC45NjUsMTAuMDFxLTc3LjYzNywwLTEyMi4wNy00OS44UTIyLjQ2MS04OS44NDQsMjIuNDYxLTE3N1pNNTU4LjM1LTUzLjcxMXE0NC42NzgsMCw3MC45MjMtMzIuOTU5dDI2LjI0NS05My43NXEwLTYwLjU0Ny0yNi4yNDUtOTMuNjI4VDU1OC4zNS0zMDcuMTI5cS00NC42NzgsMC03MS4yODksMzIuOTU5dC0yNi42MTEsOTMuNzVxMCw2MC43OTEsMjYuNjExLDkzLjc1VDU1OC4zNS01My43MTFaTTczMC43MTMtMTgwLjQycTAsOTYuOTI0LTU0LjQ0MywxNDguNDM4UTYzNS41LDEwLjAxLDU1OC4zNSwxMC4wMVQ0NDAuNDMtMzEuOTgyUTM4NS43NDItODMuNSwzODUuNzQyLTE4MC40MnEwLTk4Ljg3Nyw1NC42ODgtMTQ4LjQzN1E0ODEuMi0zNzAuODUsNTU4LjM1LTM3MC44NXQxMTcuOTIsNDEuOTkyUTczMC43MTMtMjc5LjMsNzMwLjcxMy0xODAuNDJabTU2LjE1Mi0xNzkuNDQzaDc4Ljg1N2wxNDMuMzExLDI1MS4yMjFWLTM1OS44NjNIMTA3OS4xVjBoLTc1LjJMODU2LjkzNC0yNTUuNjE1VjBINzg2Ljg2NVptNjIzLjc3OSwwdjYzLjcyMUgxMzAyLjk3OVYwaC03NS42ODRWLTI5Ni4xNDNIMTExOS4xNDF2LTYzLjcyMVpNMTcyMC43LTI5Ni4xNDNoLTE5MC40M3Y3Ni40MTZoMTc0Ljh2NjIuNWgtMTc0LjhWLTY0LjdoMTk5LjIxOVYwSDE0NTYuNzg3Vi0zNTkuODYzSDE3MjAuN1ptNjYuMTYyLTYzLjcyMWg3OC44NTdsMTQzLjMxMSwyNTEuMjIxVi0zNTkuODYzSDIwNzkuMVYwaC03NS4yTDE4NTYuOTM0LTI1NS42MTVWMGgtNzAuMDY4Wm02MjMuNzc5LDB2NjMuNzIxSDIzMDIuOTc5VjBoLTc1LjY4NFYtMjk2LjE0M0gyMTE5LjE0MXYtNjMuNzIxWm05OC4zODksMjQ4Ljc3OXEzLjQxOCwyNC42NTgsMTMuNDI4LDM2Ljg2NVEyNTQwLjc3MS01MiwyNTg1LjIwNS01MnEyNi42MTEsMCw0My4yMTMtNS44NTksMzEuNDk0LTExLjIzLDMxLjQ5NC00MS43NDgsMC0xNy44MjItMTUuNjI1LTI3LjU4OC0xNS42MjUtOS41MjEtNDkuMDcyLTE2Ljg0NmwtMzguMDg2LTguNTQ1cS01Ni4xNTItMTIuNy03Ny42MzctMjcuNTg4LTM2LjM3Ny0yNC45LTM2LjM3Ny03Ny44ODEsMC00OC4zNCwzNS4xNTYtODAuMzIydDEwMy4yNzEtMzEuOTgycTU2Ljg4NSwwLDk3LjA0NiwzMC4xNTF0NDIuMTE0LDg3LjUyNGgtNzIuMjY2cS0xLjk1My0zMi40NzEtMjguMzItNDYuMTQzLTE3LjU3OC05LjAzMy00My43LTkuMDMzLTI5LjA1MywwLTQ2LjM4NywxMS43MTlUMjUxMi43LTI2My40MjhxMCwxOS4yODcsMTcuMDksMjguODA5LDEwLjk4Niw2LjM0OCw0Ni44NzUsMTQuODkzbDYyLjAxMiwxNC44OTNxNDAuNzcxLDkuNzY2LDYxLjUyMywyNi4xMjMsMzIuMjI3LDI1LjM5MSwzMi4yMjcsNzMuNDg2LDAsNDkuMzE2LTM3LjcyLDgxLjkwOVQyNTg4LjEzNSw5LjI3N3EtNzAuMzEyLDAtMTEwLjYtMzIuMXQtNDAuMjgzLTg4LjI1N1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMi40NjEgMzcwLjg1KSIgZmlsbD0iI2VkZWRlZCIvPjwvc3ZnPg==">content</h2>

<h2 class="title-bg" style="" data-background="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzA5Ljk2MSIgaGVpZ2h0PSIzODAuODU5IiB2aWV3Qm94PSIwIDAgMjcwOS45NjEgMzgwLjg1OSI+PHBhdGggZD0iTTIyLjQ2MS0xNzdxMC05NC4yMzgsNTAuNTM3LTE0NS4yNjRRMTE2Ljk0My0zNjYuNywxODQuODE0LTM2Ni43cTkwLjgyLDAsMTMyLjgxMyw1OS41NywyMy4xOTMsMzMuNDQ3LDI0LjksNjcuMTM5aC03NS4ycS03LjMyNC0yNS44NzktMTguOC0zOS4wNjItMjAuNTA4LTIzLjQzNy02MC43OTEtMjMuNDM3LTQxLjAxNiwwLTY0LjcsMzMuMDgxVDk5LjM2NS0xNzUuNzgxcTAsNjAuNTQ3LDI1LjAyNCw5MC43dDYzLjYsMzAuMTUxcTM5LjU1MSwwLDYwLjMtMjUuODc5LDExLjQ3NS0xMy45MTYsMTkuMDQzLTQxLjc0OEgzNDEuOHEtOS43NjYsNTguODM4LTQ5LjkyNyw5NS43VDE4OC45NjUsMTAuMDFxLTc3LjYzNywwLTEyMi4wNy00OS44UTIyLjQ2MS04OS44NDQsMjIuNDYxLTE3N1pNNTU4LjM1LTUzLjcxMXE0NC42NzgsMCw3MC45MjMtMzIuOTU5dDI2LjI0NS05My43NXEwLTYwLjU0Ny0yNi4yNDUtOTMuNjI4VDU1OC4zNS0zMDcuMTI5cS00NC42NzgsMC03MS4yODksMzIuOTU5dC0yNi42MTEsOTMuNzVxMCw2MC43OTEsMjYuNjExLDkzLjc1VDU1OC4zNS01My43MTFaTTczMC43MTMtMTgwLjQycTAsOTYuOTI0LTU0LjQ0MywxNDguNDM4UTYzNS41LDEwLjAxLDU1OC4zNSwxMC4wMVQ0NDAuNDMtMzEuOTgyUTM4NS43NDItODMuNSwzODUuNzQyLTE4MC40MnEwLTk4Ljg3Nyw1NC42ODgtMTQ4LjQzN1E0ODEuMi0zNzAuODUsNTU4LjM1LTM3MC44NXQxMTcuOTIsNDEuOTkyUTczMC43MTMtMjc5LjMsNzMwLjcxMy0xODAuNDJabTU2LjE1Mi0xNzkuNDQzaDc4Ljg1N2wxNDMuMzExLDI1MS4yMjFWLTM1OS44NjNIMTA3OS4xVjBoLTc1LjJMODU2LjkzNC0yNTUuNjE1VjBINzg2Ljg2NVptNjIzLjc3OSwwdjYzLjcyMUgxMzAyLjk3OVYwaC03NS42ODRWLTI5Ni4xNDNIMTExOS4xNDF2LTYzLjcyMVpNMTcyMC43LTI5Ni4xNDNoLTE5MC40M3Y3Ni40MTZoMTc0Ljh2NjIuNWgtMTc0LjhWLTY0LjdoMTk5LjIxOVYwSDE0NTYuNzg3Vi0zNTkuODYzSDE3MjAuN1ptNjYuMTYyLTYzLjcyMWg3OC44NTdsMTQzLjMxMSwyNTEuMjIxVi0zNTkuODYzSDIwNzkuMVYwaC03NS4yTDE4NTYuOTM0LTI1NS42MTVWMGgtNzAuMDY4Wm02MjMuNzc5LDB2NjMuNzIxSDIzMDIuOTc5VjBoLTc1LjY4NFYtMjk2LjE0M0gyMTE5LjE0MXYtNjMuNzIxWm05OC4zODksMjQ4Ljc3OXEzLjQxOCwyNC42NTgsMTMuNDI4LDM2Ljg2NVEyNTQwLjc3MS01MiwyNTg1LjIwNS01MnEyNi42MTEsMCw0My4yMTMtNS44NTksMzEuNDk0LTExLjIzLDMxLjQ5NC00MS43NDgsMC0xNy44MjItMTUuNjI1LTI3LjU4OC0xNS42MjUtOS41MjEtNDkuMDcyLTE2Ljg0NmwtMzguMDg2LTguNTQ1cS01Ni4xNTItMTIuNy03Ny42MzctMjcuNTg4LTM2LjM3Ny0yNC45LTM2LjM3Ny03Ny44ODEsMC00OC4zNCwzNS4xNTYtODAuMzIydDEwMy4yNzEtMzEuOTgycTU2Ljg4NSwwLDk3LjA0NiwzMC4xNTF0NDIuMTE0LDg3LjUyNGgtNzIuMjY2cS0xLjk1My0zMi40NzEtMjguMzItNDYuMTQzLTE3LjU3OC05LjAzMy00My43LTkuMDMzLTI5LjA1MywwLTQ2LjM4NywxMS43MTlUMjUxMi43LTI2My40MjhxMCwxOS4yODcsMTcuMDksMjguODA5LDEwLjk4Niw2LjM0OCw0Ni44NzUsMTQuODkzbDYyLjAxMiwxNC44OTNxNDAuNzcxLDkuNzY2LDYxLjUyMywyNi4xMjMsMzIuMjI3LDI1LjM5MSwzMi4yMjcsNzMuNDg2LDAsNDkuMzE2LTM3LjcyLDgxLjkwOVQyNTg4LjEzNSw5LjI3N3EtNzAuMzEyLDAtMTEwLjYtMzIuMXQtNDAuMjgzLTg4LjI1N1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMi40NjEgMzcwLjg1KSIgZmlsbD0iI2VkZWRlZCIvPjwvc3ZnPg==">content</h2>

<h2 class="title-bg" style="" data-background="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzA5Ljk2MSIgaGVpZ2h0PSIzODAuODU5IiB2aWV3Qm94PSIwIDAgMjcwOS45NjEgMzgwLjg1OSI+PHBhdGggZD0iTTIyLjQ2MS0xNzdxMC05NC4yMzgsNTAuNTM3LTE0NS4yNjRRMTE2Ljk0My0zNjYuNywxODQuODE0LTM2Ni43cTkwLjgyLDAsMTMyLjgxMyw1OS41NywyMy4xOTMsMzMuNDQ3LDI0LjksNjcuMTM5aC03NS4ycS03LjMyNC0yNS44NzktMTguOC0zOS4wNjItMjAuNTA4LTIzLjQzNy02MC43OTEtMjMuNDM3LTQxLjAxNiwwLTY0LjcsMzMuMDgxVDk5LjM2NS0xNzUuNzgxcTAsNjAuNTQ3LDI1LjAyNCw5MC43dDYzLjYsMzAuMTUxcTM5LjU1MSwwLDYwLjMtMjUuODc5LDExLjQ3NS0xMy45MTYsMTkuMDQzLTQxLjc0OEgzNDEuOHEtOS43NjYsNTguODM4LTQ5LjkyNyw5NS43VDE4OC45NjUsMTAuMDFxLTc3LjYzNywwLTEyMi4wNy00OS44UTIyLjQ2MS04OS44NDQsMjIuNDYxLTE3N1pNNTU4LjM1LTUzLjcxMXE0NC42NzgsMCw3MC45MjMtMzIuOTU5dDI2LjI0NS05My43NXEwLTYwLjU0Ny0yNi4yNDUtOTMuNjI4VDU1OC4zNS0zMDcuMTI5cS00NC42NzgsMC03MS4yODksMzIuOTU5dC0yNi42MTEsOTMuNzVxMCw2MC43OTEsMjYuNjExLDkzLjc1VDU1OC4zNS01My43MTFaTTczMC43MTMtMTgwLjQycTAsOTYuOTI0LTU0LjQ0MywxNDguNDM4UTYzNS41LDEwLjAxLDU1OC4zNSwxMC4wMVQ0NDAuNDMtMzEuOTgyUTM4NS43NDItODMuNSwzODUuNzQyLTE4MC40MnEwLTk4Ljg3Nyw1NC42ODgtMTQ4LjQzN1E0ODEuMi0zNzAuODUsNTU4LjM1LTM3MC44NXQxMTcuOTIsNDEuOTkyUTczMC43MTMtMjc5LjMsNzMwLjcxMy0xODAuNDJabTU2LjE1Mi0xNzkuNDQzaDc4Ljg1N2wxNDMuMzExLDI1MS4yMjFWLTM1OS44NjNIMTA3OS4xVjBoLTc1LjJMODU2LjkzNC0yNTUuNjE1VjBINzg2Ljg2NVptNjIzLjc3OSwwdjYzLjcyMUgxMzAyLjk3OVYwaC03NS42ODRWLTI5Ni4xNDNIMTExOS4xNDF2LTYzLjcyMVpNMTcyMC43LTI5Ni4xNDNoLTE5MC40M3Y3Ni40MTZoMTc0Ljh2NjIuNWgtMTc0LjhWLTY0LjdoMTk5LjIxOVYwSDE0NTYuNzg3Vi0zNTkuODYzSDE3MjAuN1ptNjYuMTYyLTYzLjcyMWg3OC44NTdsMTQzLjMxMSwyNTEuMjIxVi0zNTkuODYzSDIwNzkuMVYwaC03NS4yTDE4NTYuOTM0LTI1NS42MTVWMGgtNzAuMDY4Wm02MjMuNzc5LDB2NjMuNzIxSDIzMDIuOTc5VjBoLTc1LjY4NFYtMjk2LjE0M0gyMTE5LjE0MXYtNjMuNzIxWm05OC4zODksMjQ4Ljc3OXEzLjQxOCwyNC42NTgsMTMuNDI4LDM2Ljg2NVEyNTQwLjc3MS01MiwyNTg1LjIwNS01MnEyNi42MTEsMCw0My4yMTMtNS44NTksMzEuNDk0LTExLjIzLDMxLjQ5NC00MS43NDgsMC0xNy44MjItMTUuNjI1LTI3LjU4OC0xNS42MjUtOS41MjEtNDkuMDcyLTE2Ljg0NmwtMzguMDg2LTguNTQ1cS01Ni4xNTItMTIuNy03Ny42MzctMjcuNTg4LTM2LjM3Ny0yNC45LTM2LjM3Ny03Ny44ODEsMC00OC4zNCwzNS4xNTYtODAuMzIydDEwMy4yNzEtMzEuOTgycTU2Ljg4NSwwLDk3LjA0NiwzMC4xNTF0NDIuMTE0LDg3LjUyNGgtNzIuMjY2cS0xLjk1My0zMi40NzEtMjguMzItNDYuMTQzLTE3LjU3OC05LjAzMy00My43LTkuMDMzLTI5LjA1MywwLTQ2LjM4NywxMS43MTlUMjUxMi43LTI2My40MjhxMCwxOS4yODcsMTcuMDksMjguODA5LDEwLjk4Niw2LjM0OCw0Ni44NzUsMTQuODkzbDYyLjAxMiwxNC44OTNxNDAuNzcxLDkuNzY2LDYxLjUyMywyNi4xMjMsMzIuMjI3LDI1LjM5MSwzMi4yMjcsNzMuNDg2LDAsNDkuMzE2LTM3LjcyLDgxLjkwOVQyNTg4LjEzNSw5LjI3N3EtNzAuMzEyLDAtMTEwLjYtMzIuMXQtNDAuMjgzLTg4LjI1N1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMi40NjEgMzcwLjg1KSIgZmlsbD0iI2VkZWRlZCIvPjwvc3ZnPg==">content</h2>

<h2 class="title-bg" style="" data-background="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzA5Ljk2MSIgaGVpZ2h0PSIzODAuODU5IiB2aWV3Qm94PSIwIDAgMjcwOS45NjEgMzgwLjg1OSI+PHBhdGggZD0iTTIyLjQ2MS0xNzdxMC05NC4yMzgsNTAuNTM3LTE0NS4yNjRRMTE2Ljk0My0zNjYuNywxODQuODE0LTM2Ni43cTkwLjgyLDAsMTMyLjgxMyw1OS41NywyMy4xOTMsMzMuNDQ3LDI0LjksNjcuMTM5aC03NS4ycS03LjMyNC0yNS44NzktMTguOC0zOS4wNjItMjAuNTA4LTIzLjQzNy02MC43OTEtMjMuNDM3LTQxLjAxNiwwLTY0LjcsMzMuMDgxVDk5LjM2NS0xNzUuNzgxcTAsNjAuNTQ3LDI1LjAyNCw5MC43dDYzLjYsMzAuMTUxcTM5LjU1MSwwLDYwLjMtMjUuODc5LDExLjQ3NS0xMy45MTYsMTkuMDQzLTQxLjc0OEgzNDEuOHEtOS43NjYsNTguODM4LTQ5LjkyNyw5NS43VDE4OC45NjUsMTAuMDFxLTc3LjYzNywwLTEyMi4wNy00OS44UTIyLjQ2MS04OS44NDQsMjIuNDYxLTE3N1pNNTU4LjM1LTUzLjcxMXE0NC42NzgsMCw3MC45MjMtMzIuOTU5dDI2LjI0NS05My43NXEwLTYwLjU0Ny0yNi4yNDUtOTMuNjI4VDU1OC4zNS0zMDcuMTI5cS00NC42NzgsMC03MS4yODksMzIuOTU5dC0yNi42MTEsOTMuNzVxMCw2MC43OTEsMjYuNjExLDkzLjc1VDU1OC4zNS01My43MTFaTTczMC43MTMtMTgwLjQycTAsOTYuOTI0LTU0LjQ0MywxNDguNDM4UTYzNS41LDEwLjAxLDU1OC4zNSwxMC4wMVQ0NDAuNDMtMzEuOTgyUTM4NS43NDItODMuNSwzODUuNzQyLTE4MC40MnEwLTk4Ljg3Nyw1NC42ODgtMTQ4LjQzN1E0ODEuMi0zNzAuODUsNTU4LjM1LTM3MC44NXQxMTcuOTIsNDEuOTkyUTczMC43MTMtMjc5LjMsNzMwLjcxMy0xODAuNDJabTU2LjE1Mi0xNzkuNDQzaDc4Ljg1N2wxNDMuMzExLDI1MS4yMjFWLTM1OS44NjNIMTA3OS4xVjBoLTc1LjJMODU2LjkzNC0yNTUuNjE1VjBINzg2Ljg2NVptNjIzLjc3OSwwdjYzLjcyMUgxMzAyLjk3OVYwaC03NS42ODRWLTI5Ni4xNDNIMTExOS4xNDF2LTYzLjcyMVpNMTcyMC43LTI5Ni4xNDNoLTE5MC40M3Y3Ni40MTZoMTc0Ljh2NjIuNWgtMTc0LjhWLTY0LjdoMTk5LjIxOVYwSDE0NTYuNzg3Vi0zNTkuODYzSDE3MjAuN1ptNjYuMTYyLTYzLjcyMWg3OC44NTdsMTQzLjMxMSwyNTEuMjIxVi0zNTkuODYzSDIwNzkuMVYwaC03NS4yTDE4NTYuOTM0LTI1NS42MTVWMGgtNzAuMDY4Wm02MjMuNzc5LDB2NjMuNzIxSDIzMDIuOTc5VjBoLTc1LjY4NFYtMjk2LjE0M0gyMTE5LjE0MXYtNjMuNzIxWm05OC4zODksMjQ4Ljc3OXEzLjQxOCwyNC42NTgsMTMuNDI4LDM2Ljg2NVEyNTQwLjc3MS01MiwyNTg1LjIwNS01MnEyNi42MTEsMCw0My4yMTMtNS44NTksMzEuNDk0LTExLjIzLDMxLjQ5NC00MS43NDgsMC0xNy44MjItMTUuNjI1LTI3LjU4OC0xNS42MjUtOS41MjEtNDkuMDcyLTE2Ljg0NmwtMzguMDg2LTguNTQ1cS01Ni4xNTItMTIuNy03Ny42MzctMjcuNTg4LTM2LjM3Ny0yNC45LTM2LjM3Ny03Ny44ODEsMC00OC4zNCwzNS4xNTYtODAuMzIydDEwMy4yNzEtMzEuOTgycTU2Ljg4NSwwLDk3LjA0NiwzMC4xNTF0NDIuMTE0LDg3LjUyNGgtNzIuMjY2cS0xLjk1My0zMi40NzEtMjguMzItNDYuMTQzLTE3LjU3OC05LjAzMy00My43LTkuMDMzLTI5LjA1MywwLTQ2LjM4NywxMS43MTlUMjUxMi43LTI2My40MjhxMCwxOS4yODcsMTcuMDksMjguODA5LDEwLjk4Niw2LjM0OCw0Ni44NzUsMTQuODkzbDYyLjAxMiwxNC44OTNxNDAuNzcxLDkuNzY2LDYxLjUyMywyNi4xMjMsMzIuMjI3LDI1LjM5MSwzMi4yMjcsNzMuNDg2LDAsNDkuMzE2LTM3LjcyLDgxLjkwOVQyNTg4LjEzNSw5LjI3N3EtNzAuMzEyLDAtMTEwLjYtMzIuMXQtNDAuMjgzLTg4LjI1N1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMi40NjEgMzcwLjg1KSIgZmlsbD0iI2VkZWRlZCIvPjwvc3ZnPg==">content</h2>

<h2 class="title-bg" style="" data-background="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzA5Ljk2MSIgaGVpZ2h0PSIzODAuODU5IiB2aWV3Qm94PSIwIDAgMjcwOS45NjEgMzgwLjg1OSI+PHBhdGggZD0iTTIyLjQ2MS0xNzdxMC05NC4yMzgsNTAuNTM3LTE0NS4yNjRRMTE2Ljk0My0zNjYuNywxODQuODE0LTM2Ni43cTkwLjgyLDAsMTMyLjgxMyw1OS41NywyMy4xOTMsMzMuNDQ3LDI0LjksNjcuMTM5aC03NS4ycS03LjMyNC0yNS44NzktMTguOC0zOS4wNjItMjAuNTA4LTIzLjQzNy02MC43OTEtMjMuNDM3LTQxLjAxNiwwLTY0LjcsMzMuMDgxVDk5LjM2NS0xNzUuNzgxcTAsNjAuNTQ3LDI1LjAyNCw5MC43dDYzLjYsMzAuMTUxcTM5LjU1MSwwLDYwLjMtMjUuODc5LDExLjQ3NS0xMy45MTYsMTkuMDQzLTQxLjc0OEgzNDEuOHEtOS43NjYsNTguODM4LTQ5LjkyNyw5NS43VDE4OC45NjUsMTAuMDFxLTc3LjYzNywwLTEyMi4wNy00OS44UTIyLjQ2MS04OS44NDQsMjIuNDYxLTE3N1pNNTU4LjM1LTUzLjcxMXE0NC42NzgsMCw3MC45MjMtMzIuOTU5dDI2LjI0NS05My43NXEwLTYwLjU0Ny0yNi4yNDUtOTMuNjI4VDU1OC4zNS0zMDcuMTI5cS00NC42NzgsMC03MS4yODksMzIuOTU5dC0yNi42MTEsOTMuNzVxMCw2MC43OTEsMjYuNjExLDkzLjc1VDU1OC4zNS01My43MTFaTTczMC43MTMtMTgwLjQycTAsOTYuOTI0LTU0LjQ0MywxNDguNDM4UTYzNS41LDEwLjAxLDU1OC4zNSwxMC4wMVQ0NDAuNDMtMzEuOTgyUTM4NS43NDItODMuNSwzODUuNzQyLTE4MC40MnEwLTk4Ljg3Nyw1NC42ODgtMTQ4LjQzN1E0ODEuMi0zNzAuODUsNTU4LjM1LTM3MC44NXQxMTcuOTIsNDEuOTkyUTczMC43MTMtMjc5LjMsNzMwLjcxMy0xODAuNDJabTU2LjE1Mi0xNzkuNDQzaDc4Ljg1N2wxNDMuMzExLDI1MS4yMjFWLTM1OS44NjNIMTA3OS4xVjBoLTc1LjJMODU2LjkzNC0yNTUuNjE1VjBINzg2Ljg2NVptNjIzLjc3OSwwdjYzLjcyMUgxMzAyLjk3OVYwaC03NS42ODRWLTI5Ni4xNDNIMTExOS4xNDF2LTYzLjcyMVpNMTcyMC43LTI5Ni4xNDNoLTE5MC40M3Y3Ni40MTZoMTc0Ljh2NjIuNWgtMTc0LjhWLTY0LjdoMTk5LjIxOVYwSDE0NTYuNzg3Vi0zNTkuODYzSDE3MjAuN1ptNjYuMTYyLTYzLjcyMWg3OC44NTdsMTQzLjMxMSwyNTEuMjIxVi0zNTkuODYzSDIwNzkuMVYwaC03NS4yTDE4NTYuOTM0LTI1NS42MTVWMGgtNzAuMDY4Wm02MjMuNzc5LDB2NjMuNzIxSDIzMDIuOTc5VjBoLTc1LjY4NFYtMjk2LjE0M0gyMTE5LjE0MXYtNjMuNzIxWm05OC4zODksMjQ4Ljc3OXEzLjQxOCwyNC42NTgsMTMuNDI4LDM2Ljg2NVEyNTQwLjc3MS01MiwyNTg1LjIwNS01MnEyNi42MTEsMCw0My4yMTMtNS44NTksMzEuNDk0LTExLjIzLDMxLjQ5NC00MS43NDgsMC0xNy44MjItMTUuNjI1LTI3LjU4OC0xNS42MjUtOS41MjEtNDkuMDcyLTE2Ljg0NmwtMzguMDg2LTguNTQ1cS01Ni4xNTItMTIuNy03Ny42MzctMjcuNTg4LTM2LjM3Ny0yNC45LTM2LjM3Ny03Ny44ODEsMC00OC4zNCwzNS4xNTYtODAuMzIydDEwMy4yNzEtMzEuOTgycTU2Ljg4NSwwLDk3LjA0NiwzMC4xNTF0NDIuMTE0LDg3LjUyNGgtNzIuMjY2cS0xLjk1My0zMi40NzEtMjguMzItNDYuMTQzLTE3LjU3OC05LjAzMy00My43LTkuMDMzLTI5LjA1MywwLTQ2LjM4NywxMS43MTlUMjUxMi43LTI2My40MjhxMCwxOS4yODcsMTcuMDksMjguODA5LDEwLjk4Niw2LjM0OCw0Ni44NzUsMTQuODkzbDYyLjAxMiwxNC44OTNxNDAuNzcxLDkuNzY2LDYxLjUyMywyNi4xMjMsMzIuMjI3LDI1LjM5MSwzMi4yMjcsNzMuNDg2LDAsNDkuMzE2LTM3LjcyLDgxLjkwOVQyNTg4LjEzNSw5LjI3N3EtNzAuMzEyLDAtMTEwLjYtMzIuMXQtNDAuMjgzLTg4LjI1N1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMi40NjEgMzcwLjg1KSIgZmlsbD0iI2VkZWRlZCIvPjwvc3ZnPg==">content</h2>
              
            
!

CSS

              
                body {
  height: 300vh;
}

h2.title-bg {
    font-size: 128px;
    font-size: 8rem;
    height: 150px;
    display: flex;
    align-items: flex-end;
    background-size: auto 100%;
    line-height: 1;
    max-width: calc(100% - (100% - 1440px)/ 2);
    width: 87.5%;
    margin: 1.25em 0 .85em auto;
}
h2 {
    text-transform: uppercase;
    font-size: 48px;
    font-size: 3rem;
}
              
            
!

JS

              
                gsap.utils.toArray(".title-bg").forEach((title) => {
  
  const splitText = new SplitText(title, { type: "chars" });
  const chars = splitText.chars;
  
  gsap.set(chars, { clipPath: "polygon(0 0, 0 0, 0 100%, 0 100%)"});
  gsap.set(title, {
    backgroundImage: "linear-gradient( #fff 100%, transparent 100%), url(" + title.dataset.background + ")"
  })
  
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: title,
        start: "top center",
        //toggleActions: "play pause replay pause",
        toggleActions: "play none none reverse",
        markers: true,
      }
    });
  
    tl    
    .to(title, {
      duration: 1,
      backgroundImage: "linear-gradient( #fff -100%,transparent 10%),url(" + title.dataset.background + ")"
    })  
    .to(
    chars,
    {
      duration: 0.5,
      clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)"
    })
    ;
  
  
});
              
            
!
999px

Console