5

I'm trying to create a simple little frontend project, and I need to make some text discernible from a background image.

How can I make the background behind the text blur? It's just blurring the container, I'd like to only blur behind the actual text.

My current code for this text:

.center h1 {
    font-size: 100px;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
    background: -webkit-linear-gradient(0deg,rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.25));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    backdrop-filter: blur(10px);
}

/* added by editor for deomnstration purpose */
body {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/5b/St_Mary%27s_Church%2C_Castle_Street_1.jpg');
  background-size: cover;
}
.center {
  position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);
    text-align: center;
    width: max-content;
}
<div class="center">
<h1>GLUSH</h1>

<!-- Added by original poster for better running -->
</div>

This is just ending up like this:

Image of bad-clipped blur on text.

Is there any way to do this? I was working with background-clip earlier...

4
  • 1
    what have you tried so far? what is not working so far? have you tried backdrop-filter: blur(1);
    – tacoshy
    Commented Feb 20, 2022 at 18:58
  • 1
    As @tacoshy said, please add code to your question when asking questions on SO or the community will likely down vote your question and you will not get a favorable outcome. Commented Feb 20, 2022 at 19:02
  • Please add HTML and CSS to your question, thanks.
    – Rounin
    Commented Feb 20, 2022 at 19:02
  • @tacoshy I've tried the backdrop-filter: method, and that's the only one i've found on the internet. I've showed how it doesn't work. As I can't find anything else on this, that's the only thing I've currently tried.
    – Harries
    Commented Feb 20, 2022 at 19:11

3 Answers 3

6

Just use backdrop-filter and play with the blur and saturate filter to your liking. blur obviosly blurring the background while saturate givin it more "color depth"

h1 {
  backdrop-filter: blur(10px) saturate(70%);
}

/* to make the header only as wide as the content and centering it */

h1 {
  width: min-content;
  padding: 20px;
  margin: 0 auto;
}
  


/* added by editor for deomnstration purpose */

body {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/5b/St_Mary%27s_Church%2C_Castle_Street_1.jpg');
  background-size: cover;
}

h1 {
  font-size: 5em;
}
<h1>GLUSH</h1>

4
  • Hi, this isn't really answering my question. I can clarify it, but I'm actually asking how I can make the background blur only behind the text, not the container.
    – Harries
    Commented Feb 20, 2022 at 20:34
  • what is the difference? Why not just apply it to the entire container and make the container only as large as needed? Why overcomplicating this case?
    – tacoshy
    Commented Feb 20, 2022 at 20:35
  • I'm sorry, I think this is irrelevant now since I just edited my UI to accommodate. But just to clear things up, I was asking how to make the blur apply to the text so you don't have an ugly box of blur, only one under the text.
    – Harries
    Commented Feb 20, 2022 at 20:39
  • 1
    oh you mean the text itself not the background of the text
    – tacoshy
    Commented Feb 20, 2022 at 20:40
3

You may be able to achieve the desired effect by utilising the [blur] value of the text-shadow property:

some-element {
  text-shadow: [x-offset] [y-offset] [blur] [color];
}

In my case, I have white text over a sandy background image, which was difficult to read due to the lack of contrast.

So, by using zero offets, and a generous blur value with a dark shadow, I was able to get a nice effect using:

my-element {
  text-shadow: 0 0 0.15em #000000;
}
0

You can also use a SVG clipPath to blur only part of an image behind text, as explained there : Applying a backdrop-filter: blur(); to an SVG path

body {
  margin 10px;
}

.relative {
  position: relative;
}

.clipped {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  clip-path: url(#svgTextPath);
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(10px);
}
<div class="relative">
    <img src="https://picsum.photos/id/99/500/300">
    <div class="clipped"></div>
</div>

<svg height="0" width="0">
    <defs>
        <clipPath id="svgTextPath">
            <text x="50" y="200" textLength="400px" font-family="Vollkorn" font-size="200px" font-weight="700"> Text </text>
        </clipPath>
    </defs>
</svg>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.