Text overlay blends with the background

Uses Plugins

Elementor Free
Elementor PRO


This tutorial shows a way to blend text inverted with a background, giving control over the contrast.

It does have some limitations compared to CSS mix-blend-mode. However, this has a completely different effect and in my view gives a greater contrast.

The inspiration is from https://css-tricks.com/methods-contrasting-text-backgrounds/


Add a section to the editor

  1. Add a section to the editor
  2. Set Content Width to "Full Width"
  3. Set Columns Gap to "No Gap"

Add HTML Widget

  1. Add an HTML Widget to the Editor
  2. Go to Advanced -> Background - Chose a background image
  3. Set to Position - "Center Center", Size - "Cover"
  4. Copy the HTML below and paste it into the "Content"
  5. Copy the CSS below and paste it into  Advanced-> Custom CSS




Look at the CSS on the HTML Widget.

Change the variables to get your desired results.

--grayscale os either 0 or 1

Others should be obviuos.

Code (click to copy)

CSS for HTML Widget (css)

    --vertical-padding: 200px;
    --grayscale: 1;
    --contrast: 9;
    --font-size: 12rem;
selector h1{ 
    font-size: var(--font-size); 
    text-align: center; 
    padding: var(--vertical-padding) 0;}

selector h1{
    margin: 0 ;
  background: inherit;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: invert(1) grayscale(var(--grayscale)) contrast(var(--contrast));

HTML for HTML Widget (html)

This is an H1 Heading.