CSS Blend Mode

Summary

• mix-blend-mode and background-blend-mode
• separable blend mode - considers each color component, such as RGB, individually. non-separable blend mode considers all color components equally

Blend Mode

• Là cách kết hợp các màu sắc với nhau, có thể mixing màu cho nhiều elements, tạo ra các hiệu ứng hình ảnh thú vị.

• mix-blend-mode

• background-blend-mode: overlay; - Được dùng để blend background trong trường hợp mình sử dùng nhiều image làm background.

      background: url("https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png"),
        url("https://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg");
      background-size: cover;
 

• Blend modes fall into two categories: separable and non-separable. A separable blend mode considers each color component, such as RGB, individually. A non-separable blend mode considers all color components equally.

Separable blend modes

• normal
• multiply - Lồng nhiều màu vào nhau. Trắng = transparent. Đen = Đen
• screen - Ngược lại với multiply, sẽ nhân light values, tạo hiệu ứng sáng hơn.
• overlay - Combine multiply và screen. Dựa trên màu tối, trở thành tối hơn, và màu sáng sẽ thành sáng hơn. Mid-range colors, ví dụ như 50% gray, sẽ không bị ảnh hưởng.
• darken
• lighten
• …

Non-separable blend modes

• The hue blend mode takes the hue of the source color and applies it to the saturation and luminosity of the backdrop color.
• Works like hue, but using saturation as the blend mode applies the saturation of the source color to the hue and luminosity of the backdrop color.
• The color blend mode will create a color from the hue and saturation of the source color and the luminosity of the backdrop color.
• …