Question 234449 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search