Join the waitlist

Add a color overlay to a WordPress section

A flat tint sits over a section’s background image, color or gradient, and under its content, so text on a busy picture stays easy to read.

Get Grinner free
See it live

Type

An upgrade to Group and Columns

Find it

Section settings, Overlay colour

Phones

The same tint on every screen

Speed

One flat layer, no extra image

Live demo

Busy picture, clear words.

This is the real Container overlay setting, running on this page.

Overlay 20%

Fresh from the market

Overlay 65%

Fresh from the market

Settings    Overlay colour Text     Overlay opacity 20 and 65

What you can change

The settings worth knowing.

A color and a strength. That’s the whole feature.

Saturday market

Overlay colour

Any palette color

Choose a color and the tint switches on.

20%

45%

80%

Overlay opacity

How strong

From 0 to 100%, with 45 as the default.

Scroll the page

Intensity

A drifting photo band

Pair it with Parallax on the same section for a photo that drifts behind readable text.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Add a background

Give the Group a background image, color or gradient.

3

Tint it

Pick an Overlay colour, raise the opacity until the text reads clearly, then publish.

Good to know

Fair questions.

The container overlay is a Grinner upgrade to Group and Columns. A flat tint sits over a section’s background image, color or gradient, and under its content. Use it so text on a busy picture stays easy to read.

No. One flat color only, with no blend modes.

The tint has square corners. Use square corners on that section, or build the tint into the picture.

No. It’s the same on every screen.

Start at 45% and raise it until white text reads easily over the busiest part of the picture.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

  • Studio-quality design
  • Built for speed
  • Pay once, no subscription

You’re on the list. We’ll email you when GrinBot launches.

Something went wrong. Please try again in a moment.

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All layout and cards features

Parallax

A section, or the things inside it, drifting at its own speed.

Hero Mode and phone motion

Motion in your hero, with the first screen still drawn straight away.

Scrolling Text

A band of words gliding past endlessly, with stars between them.

Grinner grinning

Go make something
beautiful.

Get Grinner free

Free on WordPress.org · No Pro version