start learning
Image 1
280808

Overlay blend mode

In CSS blend modes, the "overlay" blend mode is a combination of both the "multiply" and "screen" blend modes. It creates a contrast-rich effect by darkening the dark areas and brightening the light areas of the top element, depending on the underlying content. This results in an intense, high-contrast effect that can be useful for emphasizing content and creating dramatic overlays.

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

  1. If the underlying color is lighter than 50% gray, the "screen" effect is applied, which brightens the colors of the top element.
  2. If the underlying color is darker than 50% gray, the "multiply" effect is applied, which darkens the colors of the top element.

The "overlay" blend mode is particularly effective when you want to add texture, patterns, or lighting effects to an element without fully obscuring the underlying content.
Here's an example of how the "overlay" blend mode can be used in CSS:


.overlay-blend-example {
    background-color: yellow;  /* Background color of the container */
    mix-blend-mode: overlay;  /* Applying the overlay blend mode */
    color: white;
    padding: 20px;
    font-size: 24px;
}

In this example, the element with the class overlay-blend-example would appear with a yellow background color using the "overlay" blend mode. Text within this element would have a high-contrast, textured appearance, with the background color influencing the text's visual effect.

The "overlay" blend mode is often used for creative effects such as highlighting text or images with contrasting colors to make them stand out against the background.

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


.overlay-example {
    background-color: black; /* Background color of the container */
    mix-blend-mode: overlay; /* Applying the overlay blend mode */
    color: white;
    padding: 20px;
    text-align: center;
}


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

In this example, the code creates a container with a black background and applies the "overlay" blend mode. The container contains a heading and a paragraph of text. With the "overlay" blend mode applied, the white text adapts to the dark background, creating a high-contrast effect that appears to be overlaying the background.

This creates a visually appealing effect that can be used to emphasize certain parts of your content, making them stand out more against the background. The "overlay" blend mode is particularly useful for adding dynamic and engaging visual elements to your web design.

×