CSS Suggestions for a blurry header background

[JohnnieNiz]

Hello,

I need a suggestion for the h1 tag. I'm trying to get a blurry background, but I wouldn't say I like how it signals the containers behind it.

Does anyone have a better suggestion, or can a radial blur effect be made?

 

[LouisChego]

Radial blur? I hope it's the effect you were looking for!

<div class="container">
  <div class="blur blur0"></div>
  <div class="blur blur1"></div>
  <div class="blur blur2"></div>
  <div class="blur blur3"></div>
  <div class="blur blur4"></div>
  <div class="blur blur5"></div>
  <div class="blur blur6"></div>
  <div class="blur blur7"></div>
  <div class="blur blur8"></div>
  <div class="blur blur9"></div>
</div>

:root {
  --container-width: 1200px;
  --blur-base-width: calc(var(--container-width) * 0.8);
  --blur-reduce-coef: 50px;
}

.container {
  width: var(--container-width);
  aspect-ratio: 1/1;
  position: relative;
  background-image: url("https://plus.unsplash.com/premium_photo-1684952851101-6ab3e41b0448");
  background-size: cover;
}
.r {
  border: 1px solid red;
}
.blur {
  border: 1px solid red;
  aspect-ratio: 1/1;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blur0 {
  width: var(--blur-base-width);
  backdrop-filter: blur(0.3px);
}
.blur1 {
  width: calc(var(--blur-base-width) - var(--blur-reduce-coef));
  backdrop-filter: blur(0.6px);
}
.blur2 {
  width: calc(var(--blur-base-width) - (var(--blur-reduce-coef) * 2));
  backdrop-filter: blur(0.9px);
}
.blur3 {
  width: calc(var(--blur-base-width) - (var(--blur-reduce-coef) * 3));
  backdrop-filter: blur(1.2px);
}
.blur4 {
  width: calc(var(--blur-base-width) - (var(--blur-reduce-coef) * 4));
  backdrop-filter: blur(1.5px);
}
.blur5 {
  width: calc(var(--blur-base-width) - (var(--blur-reduce-coef) * 5));
  backdrop-filter: blur(1.8px);
}
.blur6 {
  width: calc(var(--blur-base-width) - (var(--blur-reduce-coef) * 6));
  backdrop-filter: blur(1.9px);
}
.blur7 {
  width: calc(var(--blur-base-width) - (var(--blur-reduce-coef) * 7));
  backdrop-filter: blur(2.2px);
}
.blur8 {
  width: calc(var(--blur-base-width) - (var(--blur-reduce-coef) * 8));
  backdrop-filter: blur(2.5px);
}
.blur9 {
  width: calc(var(--blur-base-width) - (var(--blur-reduce-coef) * 9));
  backdrop-filter: blur(1.8px);
}

 

[LouisChego]

Not sure how it would look. but have you tried adding a box shadow to the div it might give it enough of a 'feather' that you won't see the lines anymore but honestly, it's already so hard to notice that the average viewer isn't going to see it. you could also just try adding a stronger border radius to round out the most noticeable square edge, and that might be enough.

 

[JohnnieNiz]

Not sure how it would look. but have you tried adding a box shadow to the div it might give it enough of a 'feather' that you won't see the lines anymore but honestly, it's already so hard to notice that the average viewer isn't going to see it. you could also just try adding a stronger border radius to round out the most noticeable square edge, and that might be enough.

I will give it a try to both. I couldn't find any radial blur.

 

[JohnnieNiz]

Oh, that's an interesting take. Didn't think of that. I will give it a try on my own.