Facebook Instagram

Tutorial

Text overlay blends with the background

Uses Plugins

Elementor Free
Elementor PRO

Video

Play Video

Description

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/

Steps

  1. Add a section to the editor
  2. Add HTML Widget
  3. Customizing
1

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"
2

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

 

3

Customizing

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)

selector{
    --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.