start learning
Image 1
288745

Soft-light blend mode

In CSS blend modes, the "soft-light" blend mode is a subtle blending mode that creates a soft lighting effect by applying a combination of "lighten" and "darken" effects to the underlying content. This results in a gentle interaction between the top and bottom elements, producing a subtle change in color and contrast.

Here's a simplified explanation of how the "soft-light" blend mode works:

  1. If the underlying color is lighter than 50% gray, the "lighten" effect is applied, which lightens the colors of the top element.
  2. If the underlying color is darker than 50% gray, the "darken" effect is applied, which darkens the colors of the top element.
  3. The effect is subtle, and it softly blends the colors of the top and underlying elements, creating a gentle lighting effect.

Here's an example of how the "soft-light" blend mode can be used in CSS:


.soft-light-blend-example {
    background-color: #0088cc; /* Background color of the container */
    mix-blend-mode: soft-light; /* Applying the soft-light blend mode */
    color: white;
    padding: 20px;
    font-size: 24px;
}

In this example, the element with the class soft-light-blend-example would appear with a blue background color using the "soft-light" blend mode. Text within this element would adapt to the background color with a gentle lighting effect that adds a subtle dimensionality to the text.

The "soft-light" blend mode is often used when you want to add a delicate touch of contrast and lighting to your content, without creating drastic changes in color or saturation. It's particularly useful for creating elegant and subtle visual effects.

Here's another example of using the "soft-light" blend mode in CSS


.soft-light-blend-example {
    background-color: #ff9900; /* Background color of the container */
    mix-blend-mode: soft-light; /* Applying the soft-light 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="soft-light-example">
        <p>This is a sample text with soft light blend mode.</p>
    </div>
</body>
</html>

In this example, the code creates a container with an orange background and applies the "soft-light" blend mode. The container contains a heading and a paragraph of text. With the "soft-light" blend mode applied, the white text softly adapts to the orange background, creating a subtle lighting effect that adds a sense of depth to the text.

The "soft-light" blend mode is often used for creating elegant and harmonious visual effects, particularly when you want to apply a gentle touch of lighting to your content without overwhelming the overall design.

×