Tidadigi Logo

CSS mix-blend-mode Property

Thuộc tính mix-blend-mode trong CSS dùng để trộn màu nền của một phần tử. Nó trộn với màu nền của phần tử cha.

Cú pháp:

 mix-blend-mode: normal | multiply | exclusion 
            | overlay | lighten | darken 
            | color-dodge | color-burn 
            | hard-light | soft-light 
            | difference | hue 
            | saturation | color | screen 
            | luminosity

Các giá trị:

  • initial - Đây là giá trị mặc định và không thiết lập chế độ hòa trộn.
  • inherit - Giá trị này kế thừa chế độ hòa trộn từ phần tử cha.
  • unset - Giá trị này loại bỏ chế độ hòa trộn hiện tại khỏi phần tử.
  • normal - Không áp dụng hòa trộn cho phần tử này.
html 
<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>normal</h1>

        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: normal">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output:

 css-mix-blend-mode-property

  • multiply - Nhân màu của phần tử với màu nền. Màu kết quả luôn tối hơn hoặc bằng màu nền.
html 
<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>multiply</h1>
        
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: multiply">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output:

 css-mix-blend-mode-property

  • screen - Nhân màu của phần tử với màu nền rồi lấy phần bù. Màu kết quả luôn sáng hơn hoặc bằng một trong các lớp màu.
html 
<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>screen</h1>

        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: screen">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output: 

css-mix-blend-mode-property

  • exclusion - Trừ màu tối hơn trong hai màu từ màu sáng hơn của phần tử. Kết quả tương tự như 'difference' nhưng độ tương phản thấp hơn.
html 
<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>exclusion</h1>

        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: exclusion">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output: css-mix-blend-mode-property
  • overlay - Áp dụng 'multiply' cho màu sáng hơn và 'screen' cho màu tối hơn. Hiệu ứng này ngược lại với 'hard-light'.
html 
<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>overlay</h1>

        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: overlay">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output: css-mix-blend-mode-property
  • lighten - Thay thế màu nền bằng màu của phần tử khi phần tử sáng hơn.
html 
<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>lighten</h1>

        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: lighten">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output: css-mix-blend-mode-property
  • darken - Thay thế màu nền bằng màu của phần tử khi phần tử tối hơn.
html 
<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>darken</h1>

        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: darken">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output: css-mix-blend-mode-property
  • color-dodge - Làm sáng màu nền để phản ánh màu của phần tử.
html 
<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>color-dodge</h1>

        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: color-dodge">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output: css-mix-blend-mode-property
  • color-burn - Làm tối màu nền để phản ánh màu tự nhiên của hình ảnh. Kết quả là tăng độ tương phản giữa phần tử và nền.
html 
<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>color-burn</h1>

        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: color-burn">
            <img src="https:/<li><b>Normal:</b>

<strong>Syntax:</strong>
<pre>mix-blend-mode: normal</pre>

Last Updated : 21/07/2025