Is there a way to add a gradient transparency up to a specific point to a div using CSS?

Question

I'm trying to replicate an effect from the Apple TV+ Smart TV App on my personal website where there's a gradient blur over the background down to a certain point of the webpage, but once you scroll down further, the blur moves up and covers the webpage's entire background image.

Similar to how when you view a TV Show or movie on the Apple TV+ Smart TV App, the background has a sort of gradient blur over it going down to a specific point on the screen; but when you go further down (Say to view additional episodes of a TV Show or the Special features for a movie) the blur covers the entire background while the background image stays fixed.

Here's a screenshot showing the blur effect beginning towards the bottom of this screenshot over the background image/video

I have a div set up on my site with a blur backdrop filter covering the entire background image:

<div class="blurred-mask-container"></div>

and have my CSS set up like so:

.blurred-mask-container {
  top: 0;
  bottom: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(100px);
  z-index: -1;
}

And my goal is to have a gradient transparency going from transparent at the top of the div, then blurry at around 800px down specifically no long the webpage ends up being should I add/remove elements from the page.

Originally I tried setting up my div with two child divs inside: Both with the same Backdrop Filter, only the one on top was 800px tall and had a transparency mask, and the one on the bottom just had a backdrop filter with no mask. However, there was a VERY noticeable interruption in the blur effect where the bottom of the top div with the gradient mask met the top of the bottom div without one; so now I'm trying to do this effect in one div.

However every tutorial or set of instructions I've found so far online, including here, seems to only have steps for applying a gradient transparency to an image such as an image inside a div, or the background image on a website not on a div hovering over the background image that just has a backdrop filter in it. Any help in figuring this out would be greatly appreciated.

Update added for clarity: I made some mockups in photoshop to serve as an example of the effect I'm trying to pull off.

When you first load the webpage the background image should be mostly visible at the top with a blur effect over the bottom, and a gradient transparency effect go from the bottom to the top. As you scroll up the webpage, the blur should move up the screen with the scrollbar, And once you've scrolled to a certain point, the blur effect should cover the entire background image as you scroll to the bottom.

score 1 · Answer 1 · answered Aug 20 '23 at 02:45

1

Is that the way you want it?

body {
    margin: 0;
}

.content {
    font-family: arial;
    color: #fff;
}

.image {
    background-image: url("https://www.stockvault.net/data/2019/08/31/269064/preview16.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vH;
}

.description {
    position: absolute;
    top: calc(100vH - 200px);
    height: 200px;
    background-image: linear-gradient(0deg, #777, transparent);
    background-repeat: repeat-x;
    width: 100%;
}

.description h1, .description p {
    margin-left: 130px;
    margin-bottom: 0px;
}

.description h1 {
    margin-top: 70px;
}

.description p {
    margin-top: 10px;
}

<div class="content">
    <div class="image"></div>
    <div class="description">
        <h1>Cool title</h1>
        <p> Some description</p>
    </div>
</div>

answered Aug 20 '23 at 02:45

RANGO

192
9

Not exactly. I want to keep my BG Image visibly as is. I just want to use a Div with a blurry backdrop-filter inside of it the have a gradient transparency within the first 800px going from the top down, and then being completely visible for the rest of the div. That way when you're viewing the webpage from the top, the BG image is almost completely visible (Minus a bit towards the bottom where it starts to blur, but when you scroll down the webpage, the div moves up and blurs out the entire background image. – Channing Ellison Aug 20 '23 at 18:12
You´d have to adjust the sizes but the pictures visability doesn´t change. What would you want to be different except for the sizes? – RANGO Aug 20 '23 at 20:51
I've updated the question with some mockups to hopefully give a better idea of what I'm trying to achieve. – Channing Ellison Aug 20 '23 at 21:44

score 0 · Accepted Answer · answered Aug 21 '23 at 03:00

Looks like backdrop-filter does'not allow gradient blur.
But you might make it like this:

*:not(p), *:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  --bg: #522 url(https://sm.ign.com/t/ign_in/blogroll/v/valorant-w/valorant-will-be-publicly-available-in-june_u2m6.2560.jpg) no-repeat fixed 50% 0 / cover;
  background: var(--bg);
  color: #ffe;
}

header {
  height: 80vh;
  padding: 2em;
}

main {
  position: relative;
  min-height: 100vh;
  padding:  2em;
}

#blurbg {
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}

#blurbg:before {
  --r: min(4vmax, 50px);
  content: '';
  position: absolute;
  top: calc(var(--r) + var(--r));
  right: calc(var(--r) * -5);
  bottom: calc(var(--r) * -5);
  left: calc(var(--r) * -5);
  background: var(--bg);
  filter: blur(var(--r));
}

<header>
  <h1>Header</h1>
</header>
<main>
  <div id="blurbg"></div>
  <h1>Content</h1>
  <p>Valorant's latest update has released before Episode 5 Act II. The new episode will bring a fresh battlepass, competitive reset, a completely free event pass to celebrate Champions 2022, and finally a new skinline, all that has been elaborated in their trailer for Dimension: Act II. Before releasing the new update, Valorant has released the patch 5.04 to bring some quality of life updates to crosshairs and fix some bugs.</p>
  <p>Valorant's latest update has released before Episode 5 Act II. The new episode will bring a fresh battlepass, competitive reset, a completely free event pass to celebrate Champions 2022, and finally a new skinline, all that has been elaborated in their trailer for Dimension: Act II. Before releasing the new update, Valorant has released the patch 5.04 to bring some quality of life updates to crosshairs and fix some bugs.</p>
</main>

I had to tweak the code to fit exactly what I needed, but that solved it, thank you! — Channing Ellison, Aug 21 '23 at 23:00
Ran into a problem while trying to use the "blurbg" on a page with a different background image. Any suggestions on how to be able use this effect on multiple pages? — Channing Ellison, Sep 03 '23 at 03:35

Is there a way to add a gradient transparency up to a specific point to a div using CSS?

2 Answers2