start learning
Image 1
202148

Screen blend mode

In CSS blend modes, the "screen" blend mode is used to lighten the colors of the top element by combining it with the underlying elements. This mode produces a brightening effect, similar to how light passes through layers of semi-transparent materials. The "screen" blend mode is particularly useful for creating highlights, brightening images, and adding an airy and luminous quality to the design.

Here's a simplified explanation of how the "screen" blend mode works:

  1. The colors of the top element and the underlying element are inverted (opposite colors).
  2. The inverted colors are multiplied for each corresponding channel (red, green, and blue).
  3. The resulting color is then inverted back to its original color space.

The "screen" blend mode effectively lightens the colors of the top element, making it appear as if light is shining through it.
Here's an example of how the "screen" blend mode can be used in CSS: 


/* Define styles for elements with the class "screen-blend-example" */
.screen-blend-example {
    background-color: black; /* Background color of the container */
    mix-blend-mode: screen; /* Applying the screen blend mode */
    color: white; /* Set the text color to white */
    padding: 20px; /* Add padding of 20px */
    font-size: 24px; /* Set the font size to 24px */
}

In this example, the element with the class screen-blend-example would appear with a black background color using the "screen" blend mode. Text within this element would appear with a brightened effect as if light were illuminating the text.

The "screen" blend mode is often used for creating highlights, airy effects, and soft lighting. It's particularly effective when you want to make elements appear as if they are illuminated or illuminated from behind.

Here's another example of using the "screen" blend mode in CSS


/* Define styles for elements with the class "screen-example" */
.screen-example {
    background-color: #333; /* Background color of the container */
    mix-blend-mode: screen; /* Applying the screen blend mode */
    color: white; /* Set the text color to white */
    padding: 20px; /* Add padding of 20px */
    text-align: center; /* Center-align text */
}


<!DOCTYPE html>
<html>
<head>
    <title>Overlay Blend Mode Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="screen-example">
        <p>This is a sample text with screen blend mode.</p>
    </div>
</body>
</html>

In this example, the code creates a container with a dark gray background and applies the "screen" blend mode. The container contains a heading and a paragraph of text. With the "screen" blend mode applied, the white text appears as if it's illuminated against the dark background, creating a bright and highlighted effect.

The "screen" blend mode is often used for creating a sense of illumination, such as simulating light sources or emphasizing certain elements on a dark background. It can add a visually pleasing contrast and brightness to your designs.

×