• Skip to main content
  • Skip to search
  • Skip to select language
    • Technologies Overview
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs
    • Browser Extensions
    • MathML
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
    • Send Feedback
    • Contribute to MDN
    • Report a content issue 🌐
    • Report a platform issue 🌐
  1. Web technology for developers
  2. CSS: Cascading Style Sheets
  3. Compositing and Blending
  • Change language

Table of contents

  • Reference
  • Specifications
  • Browser compatibility

Compositing and Blending

Compositing and Blending is a CSS module that defines how shapes of different elements are combined into a single image.

Reference

Properties

  • background-blend-mode
  • isolation
  • mix-blend-mode

Data types

  • <blend-mode>

Specifications

Specification
Compositing and Blending Level 1

Browser compatibility

background-blend-mode property

BCD tables only load in the browser

isolation property

BCD tables only load in the browser

mix-blend-mode property

BCD tables only load in the browser

Found a problem with this page?

  • Edit on GitHub
  • Source on GitHub
  • Report a problem with this content on GitHub
  • Want to fix the problem yourself? See our Contribution guide.

Last modified: Feb 22, 2022, by MDN contributors

Change your language

Related Topics

  1. Learn CSS
  2. CSS first steps
    1. CSS first steps overview
    2. What is CSS?
    3. Getting started with CSS
    4. How CSS is structured
    5. How CSS works
    6. Using your new knowledge
  3. CSS building blocks
    1. CSS building blocks overview
    2. Cascade and inheritance
    3. CSS selectors
    4. The box model
    5. Backgrounds and borders
    6. Handling different text directions
    7. Overflowing content
    8. Values and units
    9. Sizing items in CSS
    10. Images, media, and form elements
    11. Styling tables
    12. Debugging CSS
    13. Organizing your CSS
  4. Styling text
    1. Styling text overview
    2. Fundamental text and font styling
    3. Styling lists
    4. Styling links
    5. Web fonts
    6. Assessment: Typesetting a community school homepage
  5. CSS layout
    1. CSS layout overview
    2. Introduction to CSS layout
    3. Normal Flow
    4. Flexbox
    5. Grids
    6. Floats
    7. Positioning
    8. Multiple-column Layout
    9. Responsive design
    10. Beginner's guide to media queries
    11. Legacy Layout Methods
    12. Supporting Older Browsers
    13. Fundamental Layout Comprehension
  6. Reference
  7. Modules
    1. Compositing and Blending
    2. CSS Animations
    3. CSS Backgrounds and Borders
    4. CSS Basic User Interface
    5. CSS Box Model
    6. CSS Charsets
    7. CSS Color
    8. CSS Multi-column Layout
    9. CSS Conditional Rules
    10. CSS Counter Styles
    11. CSS Device Adaptation
    12. CSS Display
    13. CSS Flexible Box Layout
    14. CSS Fonts
    15. CSS Fragmentation
    16. CSS Generated Content
    17. CSS Grid Layout
    18. CSS Houdini
    19. CSS Images
    20. CSS Lists
    21. CSS Logical Properties and Values
    22. CSS Masking
    23. CSS Miscellaneous
    24. CSS Motion Path
    25. CSS Namespaces
    26. CSS Paged Media
    27. CSS Positioned Layout
    28. CSS Ruby Layout
    29. CSS Scroll Snap Points
    30. CSS Scroll Snap
    31. CSS Scrollbars
    32. CSS selectors
    33. CSS Shapes
    34. CSS Table
    35. CSS Text Decoration
    36. CSS Text
    37. CSS Transforms
    38. CSS Transitions
    39. CSS data types
    40. CSS Custom Properties for Cascading Variables
    41. CSS Writing Modes
    42. CSSOM View
    43. Filter Effects
    44. Media queries
    45. Pseudo-classes
    46. Pseudo-elements
    47. CSS reference
  8. Properties
    1. accent-color
    2. align-content
    3. align-items
    4. align-self
    5. all
    6. animation-delay
    7. animation-direction
    8. animation-duration
    9. animation-fill-mode
    10. animation-iteration-count
    11. animation-name
    12. animation-play-state
    13. animation-timeline
    14. animation-timing-function
    15. animation
    16. appearance
    17. aspect-ratio
    18. backdrop-filter
    19. backface-visibility
    20. background-attachment
    21. background-blend-mode
    22. background-clip
    23. background-color
    24. background-image
    25. background-origin
    26. background-position-x
    27. background-position-y
    28. background-position
    29. background-repeat
    30. background-size
    31. background
    32. block-size
    33. border-block-color
    34. border-block-end-color
    35. border-block-end-style
    36. border-block-end-width
    37. border-block-end
    38. border-block-start-color
    39. border-block-start-style
    40. border-block-start-width
    41. border-block-start
    42. border-block-style
    43. border-block-width
    44. border-block
    45. border-bottom-color
    46. border-bottom-left-radius
    47. border-bottom-right-radius
    48. border-bottom-style
    49. border-bottom-width
    50. border-bottom
    51. border-collapse
    52. border-color
    53. border-end-end-radius
    54. border-end-start-radius
    55. border-image-outset
    56. border-image-repeat
    57. border-image-slice
    58. border-image-source
    59. border-image-width
    60. border-image
    61. border-inline-color
    62. border-inline-end-color
    63. border-inline-end-style
    64. border-inline-end-width
    65. border-inline-end
    66. border-inline-start-color
    67. border-inline-start-style
    68. border-inline-start-width
    69. border-inline-start
    70. border-inline-style
    71. border-inline-width
    72. border-inline
    73. border-left-color
    74. border-left-style
    75. border-left-width
    76. border-left
    77. border-radius
    78. border-right-color
    79. border-right-style
    80. border-right-width
    81. border-right
    82. border-spacing
    83. border-start-end-radius
    84. border-start-start-radius
    85. border-style
    86. border-top-color
    87. border-top-left-radius
    88. border-top-right-radius
    89. border-top-style
    90. border-top-width
    91. border-top
    92. border-width
    93. border
    94. bottom
    95. box-decoration-break
    96. box-shadow
    97. box-sizing
    98. break-after
    99. break-before
    100. break-inside
    101. caption-side
    102. caret-color
    103. clear
    104. clip-path
    105. clip
    106. color-scheme
    107. color
    108. column-count
    109. column-fill
    110. column-gap (grid-column-gap)
    111. column-rule-color
    112. column-rule-style
    113. column-rule-width
    114. column-rule
    115. column-span
    116. column-width
    117. columns
    118. contain
    119. content-visibility
    120. content
    121. counter-increment
    122. counter-reset
    123. counter-set
    124. cursor
    125. direction
    126. display
    127. empty-cells
    128. filter
    129. flex-basis
    130. flex-direction
    131. flex-flow
    132. flex-grow
    133. flex-shrink
    134. flex-wrap
    135. flex
    136. float
    137. font-family
    138. font-feature-settings
    139. font-kerning
    140. font-language-override
    141. font-optical-sizing
    142. font-size-adjust
    143. font-size
    144. font-stretch
    145. font-style
    146. font-synthesis
    147. font-variant-alternates
    148. font-variant-caps
    149. font-variant-east-asian
    150. font-variant-ligatures
    151. font-variant-numeric
    152. font-variant-position
    153. font-variant
    154. font-variation-settings
    155. font-weight
    156. font
    157. forced-color-adjust
    158. gap (grid-gap)
    159. grid-area
    160. grid-auto-columns
    161. grid-auto-flow
    162. grid-auto-rows
    163. grid-column-end
    164. grid-column-start
    165. grid-column
    166. grid-row-end
    167. grid-row-start
    168. grid-row
    169. grid-template-areas
    170. grid-template-columns
    171. grid-template-rows
    172. grid-template
    173. grid
    174. hanging-punctuation
    175. height
    176. hyphenate-character
    177. hyphens
    178. image-rendering
    179. image-resolution
    180. ime-mode
    181. initial-letter-align
    182. initial-letter
    183. inline-size
    184. inset-block-end
    185. inset-block-start
    186. inset-block
    187. inset-inline-end
    188. inset-inline-start
    189. inset-inline
    190. inset
    191. isolation
    192. justify-content
    193. justify-items
    194. justify-self
    195. left
    196. letter-spacing
    197. line-break
    198. line-height-step
    199. line-height
    200. list-style-image
    201. list-style-position
    202. list-style-type
    203. list-style
    204. margin-block-end
    205. margin-block-start
    206. margin-block
    207. margin-bottom
    208. margin-inline-end
    209. margin-inline-start
    210. margin-inline
    211. margin-left
    212. margin-right
    213. margin-top
    214. margin-trim
    215. margin
    216. mask-border-mode
    217. mask-border-outset
    218. mask-border-repeat
    219. mask-border-slice
    220. mask-border-source
    221. mask-border-width
    222. mask-border
    223. mask-clip
    224. mask-composite
    225. mask-image
    226. mask-mode
    227. mask-origin
    228. mask-position
    229. mask-repeat
    230. mask-size
    231. mask-type
    232. mask
    233. max-block-size
    234. max-height
    235. max-inline-size
    236. max-width
    237. min-block-size
    238. min-height
    239. min-inline-size
    240. min-width
    241. mix-blend-mode
    242. object-fit
    243. object-position
    244. offset-distance
    245. offset-position
    246. offset-rotate
    247. offset
    248. opacity
    249. order
    250. orphans
    251. outline-color
    252. outline-offset
    253. outline-style
    254. outline-width
    255. outline
    256. overflow-anchor
    257. overflow-block
    258. overflow-clip-margin
    259. overflow-inline
    260. overflow-wrap
    261. overflow-x
    262. overflow-y
    263. overflow
    264. overscroll-behavior-block
    265. overscroll-behavior-inline
    266. overscroll-behavior-x
    267. overscroll-behavior-y
    268. overscroll-behavior
    269. padding-block-end
    270. padding-block-start
    271. padding-bottom
    272. padding-inline-end
    273. padding-inline-start
    274. padding-left
    275. padding-right
    276. padding-top
    277. padding
    278. page-break-after
    279. page-break-before
    280. page-break-inside
    281. perspective-origin
    282. perspective
    283. place-content
    284. place-items
    285. place-self
    286. pointer-events
    287. position
    288. print-color-adjust
    289. quotes
    290. resize
    291. right
    292. rotate
    293. row-gap (grid-row-gap)
    294. ruby-align
    295. ruby-position
    296. scale
    297. scroll-behavior
    298. scroll-margin-bottom
    299. scroll-margin-inline-start
    300. scroll-margin-inline
    301. scroll-margin-left
    302. scroll-margin-right
    303. scroll-margin-top
    304. scroll-padding-block-end
    305. scroll-padding-block-start
    306. scroll-padding-bottom
    307. scroll-padding-inline-end
    308. scroll-padding-inline-start
    309. scroll-padding-inline
    310. scroll-padding-left
    311. scroll-padding
    312. scroll-snap-coordinate
    313. scroll-snap-destination
    314. scroll-snap-points-x
    315. scroll-snap-points-y
    316. scroll-snap-type
    317. scrollbar-color
    318. scrollbar-width
    319. shape-image-threshold
    320. shape-margin
    321. shape-outside
    322. tab-size
    323. table-layout
    324. text-align-last
    325. text-align
    326. text-combine-upright
    327. text-decoration-color
    328. text-decoration-line
    329. text-decoration-skip-ink
    330. text-decoration-skip
    331. text-decoration-style
    332. text-decoration
    333. text-emphasis-color
    334. text-emphasis-position
    335. text-emphasis-style
    336. text-emphasis
    337. text-indent
    338. text-justify
    339. text-orientation
    340. text-overflow
    341. text-rendering
    342. text-shadow
    343. text-size-adjust
    344. text-transform
    345. text-underline-position
    346. top
    347. touch-action
    348. transform-box
    349. transform-origin
    350. transform-style
    351. transform
    352. transition-delay
    353. transition-duration
    354. transition-property
    355. transition-timing-function
    356. transition
    357. translate
    358. unicode-bidi
    359. user-select
    360. vertical-align
    361. visibility
    362. white-space
    363. widows
    364. width
    365. will-change
    366. word-break
    367. word-spacing
    368. writing-mode
    369. z-index
  9. Selectors
    1. Adjacent sibling combinator
    2. Attribute selectors
    3. Child combinator
    4. Class selectors
    5. Column combinator
    6. Descendant combinator
    7. General sibling combinator
    8. ID selectors
    9. Selector list
    10. Type selectors
    11. Universal selectors
  10. Pseudo-classes
    1. :active
    2. :any-link
    3. :autofill
    4. :blank
    5. :checked
    6. :default
    7. :defined
    8. :dir()
    9. :disabled
    10. :empty
    11. :enabled
    12. :first-child
    13. :first-of-type
    14. :first
    15. :focus-visible
    16. :focus-within
    17. :focus
    18. :fullscreen
    19. :has()
    20. :host()
    21. :host-context()
    22. :host
    23. :hover
    24. :in-range
    25. :indeterminate
    26. :invalid
    27. :is() (:matches(), :any())
    28. :lang()
    29. :last-child
    30. :last-of-type
    31. :left
    32. :link
    33. :not()
    34. :nth-child()
    35. :nth-last-child()
    36. :nth-last-of-type()
    37. :nth-of-type()
    38. :only-child
    39. :only-of-type
    40. :optional
    41. :out-of-range
    42. :paused
    43. :picture-in-picture
    44. :placeholder-shown
    45. :playing
    46. :read-only
    47. :read-write
    48. :required
    49. :right
    50. :root
    51. :scope
    52. :target
    53. :user-invalid (:-moz-ui-invalid)
    54. :user-valid (:-moz-ui-valid)
    55. :valid
    56. :visited
    57. :where()
    58. Privacy and the :visited selector
    59. Pseudo-classes
  11. Pseudo-elements
    1. ::after (:after)
    2. ::backdrop
    3. ::before (:before)
    4. ::cue-region
    5. ::cue
    6. ::first-letter (:first-letter)
    7. ::first-line (:first-line)
    8. ::grammar-error
    9. ::marker
    10. ::part()
    11. ::placeholder
    12. ::selection
    13. ::slotted()
    14. ::spelling-error
    15. ::target-text
    16. Pseudo-elements
  12. At-rules
    1. @charset
    2. @color-profile
    3. @counter-style
    4. @document
    5. @font-face
    6. @font-feature-values
    7. @import
    8. @keyframes
    9. @layer
    10. @media
    11. @namespace
    12. @page
    13. @property
    14. @scroll-timeline
    15. @supports
    16. @viewport
  13. Types
    1. <alpha-value>
    2. <angle-percentage>
    3. <angle>
    4. <basic-shape>
    5. <blend-mode>
    6. <color>
    7. CSS Functional Notation
    8. CSS data types
    9. <custom-ident>
    10. <dimension>
    11. <display-box>
    12. <display-inside>
    13. <display-internal>
    14. <display-legacy>
    15. <display-listitem>
    16. <display-outside>
    17. <easing-function>
    18. <filter-function>
    19. <flex>
    20. <frequency-percentage>
    21. <frequency>
    22. <gradient>
    23. ident
    24. <image>
    25. <integer>
    26. <length-percentage>
    27. <length>
    28. <number>
    29. <percentage>
    30. <position>
    31. <ratio>
    32. <resolution>
    33. <shape>
    34. <string>
    35. <time-percentage>
    36. <time>
    37. <transform-function>
    38. <translation-value>
  14. Guides
  15. Animations
    1. Using CSS animations
  16. Backgrounds and Borders
    1. Using multiple backgrounds
    2. Resizing background images
  17. Box alignment
    1. Box alignment in block layout
    2. Box alignment in flexbox
    3. Box alignment in grid layout
    4. Box alignment in multi-column layout
  18. Box model
    1. Introduction to the CSS basic box model
    2. Mastering margin collapsing
  19. Columns
    1. Basic concepts of Multicol
    2. Styling columns
    3. Spanning and balancing
    4. Handling overflow in Multicol
    5. Content breaks in Multicol
  20. Conditional rules
    1. Using feature queries
  21. CSSOM view
    1. Coordinate systems
  22. Flexbox
    1. Basic concepts of Flexbox
    2. Comparison with other layout methods
    3. Aligning items in a flex container
    4. Ordering flex items
    5. Controlling flex item ratios
    6. Mastering wrapping of flex items
    7. Typical use cases of Flexbox
    8. Backwards compatibility of Flexbox
  23. Flow layout
    1. Block and Inline layout in normal flow
    2. In flow and Out of flow
    3. Formatting contexts explained
    4. Flow layout and writing modes
    5. Flow layout and overflow
  24. Fonts
    1. OpenType font features guide
    2. Variable fonts guide
  25. Grid
    1. Basics concepts of grid layout
    2. Relationship to other layout methods
    3. Line-based placement
    4. Grid template areas
    5. Layout using named grid lines
    6. Auto-placement in grid layout
    7. Box alignment in grid layout
    8. Grids, logical values and writing modes
    9. Grid layout and accessibility
    10. Grid Layout and progressive enhancement
    11. Realizing common layouts using grids
    12. Subgrid
    13. Masonry layout
  26. Images
    1. Using CSS gradients
  27. Lists and counters
    1. Using CSS counters
    2. Consistent list indentation
  28. Logical properties
    1. Basic concepts
    2. Floating and positioning
    3. Margins, borders and padding
    4. Sizing
  29. Media queries
    1. Using media queries
    2. Using media queries for accessibility
    3. Testing media queries programmatically
  30. Positioning
    1. Understanding CSS z-index
  31. Scroll snap
    1. Basic concepts of scroll snap
    2. Browser compatibility and scroll snap
  32. Shapes
    1. Overview of shapes
    2. Shapes from box values
    3. Basic shapes
    4. Shapes from images
  33. Text
    1. Wrapping and breaking text
  34. Transforms
    1. Using transforms
  35. Transitions
    1. Using transitions
  36. Layout cookbook
    1. Media objects
    2. Columns
    3. Center an element
    4. Sticky footers
    5. Split navigation
    6. Breadcrumb navigation
    7. List group with badges
    8. Pagination
    9. Card
    10. Grid wrapper
  38. Tools
    1. Color picker
    2. Box shadow generator
    3. Border image generator
  • Web Technologies
  • Learn Web Development
  • About MDN
  • Feedback
  • About
  • MDN Web Docs Store
  • Contact Us
  • Firefox

MDN

  • MDN on Twitter
  • MDN on Github

Mozilla

  • Mozilla on Twitter
  • Mozilla on Instagram

© 2005-2022 Mozilla and individual contributors. Content is available under these licenses.

  • Terms
  • Privacy
  • Cookies