πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Blend Text Into Images in CSS

How to Blend Text Into Images in CSS

Ferenc Almasi β€’ 2020 August 19 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

You can use the mix-blend-mode property in CSS to blend text into images:

Copied to clipboard! Playground
// Use the mix-blend-mode property to blend text
// into images.

.blend { 
  mix-blend-mode: overlay;
}

<figure>
  <img src="nature.jpg" />
  <figcaption class="blend">
    β€œNature does not hurry, 
    yet everything is accomplished.”
~ Lao Tzu
  </figcaption>
</figure>
blend.html

You can check the result in the following Codepen:

Blending text into images

The mix-blend-mode property can take up a number of different values:

Copied to clipboard! Playground
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
blend.css
How to Blend Text Into Images in CSS
If you would like to see more Webtips, follow @flowforfrank

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.