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.

The Oxygen Team

Updated on: January 30, 2025

See more

Latest updates from Oxygen team.

Oxygen + WPCodeBox: Crafting Powerful WordPress Sites Together

Published on April 2, 2025

Elementor vs Divi I Built the Same Site in Each and It Almost Killed Me

Elementor vs Divi: I Built the Same Site in Each and It Almost Killed Me

Published on April 18, 2025

Information for Breakdance users

Published on February 26, 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.