← Back to CSS Course | Chapter 8: Animations & Effects | Lesson 4 of 22

CSS Blend Modes

दो clear plastic slides को overlay करने की कल्पना करें। Slide एक पर एक blue square print है, और slide दो पर एक red circle है। अगर आप उन्हें किसी projector पर रखें, तो overlapping area purple हो जाता है क्योंकि light through चमकती है और colors को साथ में blend कर देती है। CSS blend modes वही color-blending rules हैं। ये आपको overlapping elements या background images के colors को साथ में blend करने देते हैं, खूबसूरत, professional textures और design patterns बनाते हुए।

In this page:

  1. Blend Mode Concept
  2. Background Layers को Blend करना
  3. multiply से Colors को Multiply करना
  4. Screen Blend Overlays
  5. difference से Text Inversion
Syntax
css 
selector {
  mix-blend-mode: multiply | screen | overlay | difference;
  background-blend-mode: value;
}

Blend Mode Concept

Blend modes तय करते हैं कि किसी element के colors उसके पीछे के elements के colors के साथ कैसे blend होते हैं। CSS दो properties देता है: mix-blend-mode (अलग overlapping HTML elements को blend करने के लिए) और background-blend-mode (एक ही element के अंदर कई background layers को blend करने के लिए)।

isolation property किसी element पर एक नया stacking context बनाती है, जो तब उपयोगी है जब आप चाहते हैं कि elements का एक group एक-दूसरे के साथ blend हो लेकिन group के पीछे किसी भी चीज़ के साथ blend होने से isolated रहे -- उनके shared parent पर isolation: isolate set करना blending effect को सिर्फ उस group तक contain करता है।

Note:
  • अलग, pre-blended image assets load किए बिना high-performance color overlay effects बनाने के लिए blend modes इस्तेमाल करें।
  • Accepted values:
  • normal — कोई blending नहीं (default)
  • multiply — colors को multiply करके darken करता है
  • screen — result को lighten करता है
  • overlay — multiply और screen को combine करता है
  • darken | lighten — darker या lighter color रखता है
  • color-dodge | color-burn — top layer इस्तेमाल करके base को brighten या darken करता है
  • hard-light | soft-light — strong या gentle contrast
  • difference | exclusion — colors घटाता है
  • hue | saturation | color | luminosity — HSL-based modes
  • mix-blend-mode और background-blend-mode के साथ इस्तेमाल होता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: सुनिश्चित करें कि blend modes इस्तेमाल करते समय आपका text readable रहे, क्योंकि complex color blending text contrast घटा सकती है।

उदाहरण: The Blend Mode Concept

css 
<style>
.group {
  isolation: isolate;
  background: white;
  padding: 30px;
}
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: crimson;
  mix-blend-mode: multiply;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>
<div class="group">
  <div class="circle">Blends with siblings, isolated from behind</div>
</div>

Background Layers को Blend करना

background-blend-mode property एक ही element के अंदर कई background layers (जैसे एक background image और एक solid color gradient) को blend करती है, एक tinted overlay effect बनाते हुए।

Note:
  • एक consistent, tinted layout card बनाने के लिए multiply blend mode इस्तेमाल करके एक dark brand color को एक grayscale background image के साथ combine करें।
  • Accepted values:
  • background-blend-mode: normal — default, कोई blending नहीं
  • multiply — colors को multiply करके darken करता है
  • screen — lighten करता है
  • overlay — multiply और screen को combine करता है
  • darken | lighten — darker या lighter channel रखता है
  • color-dodge | color-burn | hard-light | soft-light — ज़्यादा contrast modes
  • difference | exclusion — inverting modes
  • hue | saturation | color | luminosity — non-separable modes
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: Background blend modes सिर्फ उन properties पर काम करते हैं जो background-image rule के अंदर declared हैं।

उदाहरण: Blending Background Layers

css 
<style>
.box {
  background-image: url('https://placehold.co/200x150'), linear-gradient(navy, navy);
  background-blend-mode: multiply;
}
</style>
<div class="box">Tinted background layers</div>

multiply से Colors को Multiply करना

multiply blend mode overlapping layers के colors को multiply करता है, हमेशा एक darker color blend देते हुए। यह बिल्कुल दो translucent color slides को एक-दूसरे के ऊपर layer करने जैसा काम करता है।

Note:
  • complex CSS gradients की ज़रूरत के बिना dark background photos के ऊपर text को साफ़ तरीके से overlay करने के लिए multiply इस्तेमाल करें।
  • Accepted values:
  • multiply — result darker या equal है, white neutral है
  • mix-blend-mode: multiply — element को उसके पीछे की चीज़ के साथ blend करता है
  • background-blend-mode: multiply — किसी element के अपने backgrounds को blend करता है
  • color-burn — एक stronger darkening mode
Warning: dark colors को multiply करना जल्दी solid black बना सकता है, इसलिए सुनिश्चित करें कि आपके backgrounds में high contrast हो।

उदाहरण: Multiplying Colors with multiply

css 
<style>
.overlay {
  mix-blend-mode: multiply;
  background: red;
}
</style>
<div style="background: url('https://placehold.co/200x100')">
  <div class="overlay">Multiply darkens overlapping colors</div>
</div>

Screen Blend Overlays

screen blend mode multiply के उल्टा है: यह overlapping layers के inverse को multiply करता है, हमेशा एक lighter color blend देते हुए। यह dark backdrops के ऊपर bright elements को blend करने के लिए perfect है।

Note:
  • dark background panels पर bright, glowing graphics को साफ़ तरीके से overlay करने के लिए screen blend mode इस्तेमाल करें।
  • Accepted values:
  • screen — result lighter या equal है, black neutral है
  • lighten — दो colors में से lighter रखता है
  • color-dodge — top layer इस्तेमाल करके base को brighten करता है
  • mix-blend-mode: screen — backdrop के साथ blend करता है
Warning: light backgrounds के against light colors screen करना जल्दी solid white, washed-out layouts बना सकता है।

उदाहरण: Screen Blend Overlays

css 
<style>
.glow {
  mix-blend-mode: screen;
  background: yellow;
}
</style>
<div style="background: black">
  <div class="glow">Screen lightens overlapping colors</div>
</div>

difference से Text Inversion

difference blend mode lighter color value में से darker color value घटाता है। यह accessible, auto-inverting text headers बनाने के लिए बेहद उपयोगी है जो light और dark page layouts में slide करते हुए automatically black से white में switch हो जाते हैं।

Note:
  • यह सुनिश्चित करने के लिए कि आपके headers busy, multi-colored background images पर perfectly readable रहें, difference blend mode इस्तेमाल करें।
  • Accepted values:
  • difference — lighter color में से darker color घटाता है
  • exclusion — similar लेकिन कम contrast के साथ
  • mix-blend-mode: difference — किसी element पर लागू करता है
  • background पर white text — background colors को invert करता है
Warning: Difference styling intermediate, low-contrast gray backgrounds पर अजीब दिख सकती है, इसलिए contrast levels सावधानी से test करें।

उदाहरण: Text Inversion with difference

css 
<style>
h1 {
  mix-blend-mode: difference;
  color: white;
}
</style>
<div style="background: url('https://placehold.co/400x100')">
  <h1>Auto-inverting header</h1>
</div>
Live Example
Related Topics

CSS Writing Modes · CSS Filters · CSS Transforms · CSS Shadows

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. standard HTML img tags पर background-blend-mode इस्तेमाल करना; इसके बजाय mix-blend-mode इस्तेमाल करें या image को background asset के तौर पर load करें।
  2. background-blend-mode इस्तेमाल करने की कोशिश करते समय एक background color set करना भूल जाना, जिसका नतीजा कोई blend effect न होना है।
  3. low-contrast colors combine करना जो आपके text को unreadable बना देते हैं और accessibility guidelines violate करते हैं।
चैप्टर सारांश
  • Blend modes तय करते हैं कि किसी element के colors उसके पीछे के elements के colors के साथ कैसे blend होते हैं।
  • अलग overlapping HTML elements को blend करने के लिए mix-blend-mode इस्तेमाल करें, और एक ही element के अंदर background layers को blend करने के लिए background-blend-mode।
  • layouts को darken करने के लिए multiply, designs को brighten करने के लिए screen, और auto-inverting, accessible text headers बनाने के लिए difference लागू करें।
ब्राउज़र सपोर्ट

Standard CSS mix-blend-mode और background-blend-mode properties हर modern web browser द्वारा natively supported हैं।

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Filters Next Lesson → CSS Transforms

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.