Setting a blending mode for a pseudo-element

Question

I am trying to recreate a Photoshop effect in CSS. I have a large sized text on an image background, and I would like the text to have a light colored shadow. This effect is produced in Photoshop using the Outer Glow effect, with the glow having "screen" blending mode.

Since the shadow has large spread (large dilation of the shadow), using the text-shadow property is impractical since it creates blobs on large sizes and the effect simply looks different from the preview above. Because of that, I am creating a shadow-like blurred background below the text in ::after. This allows me to make it smoothly blurred (no blobs).

I would like the shadow-like background in the ::after presudo-element to have a special blending mode, specifically screen. I know I can use mix-blend-mode in general, but it does not seem to work in this scenario. Is there any way to set blending mode for the ::after pseudo-element?

This is what I have: CSS:

.container {
  padding: 35pt;
  text-align: center;
  background: url("../images/background.jpg") no-repeat;
  background-size: cover;
  background-position-y: -2pt;
  position: relative;
}

.container h1 {
  text-align: center;
  font-size: 26pt;
  font-weight: 700;
  margin: 0pt auto -10pt auto;
  padding: 10pt 30pt;
  z-index: 100;
  display: inline-block;
}

.container h1::after {
  mix-blend-mode: overlay;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: radial-gradient(
      circle at center,
      rgba(224,235,245,0.9) 20%,
      rgba(224,235,245,0.8) 90%
  );
  border-radius: 50px;
  filter: blur(15px);
  z-index: -1;
}

HTML:

<div class = "container">
  <h1>Hello World! This is a long text.</h1>
</div>

score 0 · Accepted Answer · answered Jun 22 '23 at 20:30

You are almost there. You need to add position: relative to the h1 so the pseudo element use it as reference then add z-index to the container to create a stacking context but don't set any z-index on the h1.

Related question for more detail: Why can't an element with a z-index value cover its child?

.container {
  padding: 35pt;
  text-align: center;
  background: url("https://picsum.photos/id/1018/800/300") no-repeat;
  background-size: cover;
  background-position-y: -2pt;
  position: relative;
  z-index: 0;
}

.container h1 {
  text-align: center;
  font-size: 26pt;
  font-weight: 700;
  margin: 0pt auto -10pt auto;
  padding: 10pt 30pt;
  display: inline-block;
  position: relative;
}

.container h1::after {
  mix-blend-mode: overlay;
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at center,
      rgba(224,235,245,0.9) 20%,
      rgba(224,235,245,0.8) 90%
  );
  border-radius: 50px;
  filter: blur(15px);
  z-index: -1;
}

<div class="container">
  <h1>Hello World! This is a long text.</h1>
</div>

Wow! Many, many thanks for that. Although the edits you made absolutely make sense, I think I would give up before I would realize this. You just made my day :) — Ondrej, Jun 23 '23 at 06:29

Setting a blending mode for a pseudo-element

1 Answers1