Published on April 5, 2019

Tutorial: Screen Blend Mode Effect in Oxygen

In this tutorial, you’ll learn how to make a screen blend mode effect using the new CSS Blend Modes feature in Oxygen 2.2.

With the blend mode feature of CSS, you can create Photoshop-like effects directly in the browser.

You can apply blend modes to any element from Advanced > Effects > Opacity in the Oxygen builder. Blend modes can also be applied to background layers from Advanced > Background > Background Blend Mode.

In this tutorial, we’ll use a section, a heading, and an absolutely positioned image set to screen blend mode to create an effect where the image shows through the heading text only.

Oxygen Builder

Updated on: January 30, 2025

Pixel-perfect design meets WordPress!

Oxygen is the best way to visually design WordPress websites.

If you can build it with WordPress, you can design it with Oxygen.

Lifetime Access
Oxygen Classic + New Oxygen
All Premium Add-Ons
60-Day Money Back Guarantee

Start Designing

See more

Latest updates from Oxygen team.

Oxygen 6 RC 1 Is Now Available

Published on January 15, 2026

Oxygen 4.9.5 Now Available

Published on December 24, 2025

Oxygen 4.9.4 Now Available

Published on December 24, 2025

You'll build incredible websites with Oxygen

Get started with Oxygen today and unlock incredible value.

30-day money back gurantee

Try Oxygen risk-free. If you’re not satisfied, get a full refund within 30 days.

Unlimited site license

Use Oxygen on as many personal or client projects as you want — no limits.

Fast, world-class support

Our experienced team is eager to assist you with technical questions.

Use on client websites

Build and deliver professional-grade websites for your clients with no extra fees.