How to add transparent gradient ABOVE a bottom nav bar with css?

Question

How do I add the transparent gradient effect when an element is partially hidden by a bottom nav bar like in the example below.

I can add a transparent gradient to an element like so: https://stackoverflow.com/a/4480950/1662619

But not above an element, is it even possible? With some hidden element perhaps?

"*Is it even possible?*" - yes. But how to do so is largely dependant on your HTML and existing CSS, and how the elements are laid out on the page. Can you share you "*[mcve]*" code? — David Thomas, Jul 19 '23 at 11:58

Peter Krebs · Accepted Answer · 2023-07-19T13:00:13.957

Not sure what your requirements are or if you are using CSS frameworks etc., but a simple idea is a div between the image and the actions.

Position that div with position: relative;, give it a positive z-index z-index: 2;, a fixed height and a negative margin.
Make the div above also position: relative; and give it a lower z-index like z-index: 0;. Add the gradient to the in-between div and there you have it.

See snippet below:

* { margin: 0; padding: 0; }

body { padding: 10px; }

p { margin: 5px 0 8px; }

.card {
  width: 100%;
  max-width: 400px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
}

.card .content {
  padding: 10px 10px 0 10px;
}

.card .map {
  position: relative;
  z-index: 0;
  width: 80%;
  max-width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

.card .fading-gradient-bottom {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 16px;
  margin-top: -16px;
  background: rgb(200,200,200);
background: linear-gradient(0deg, rgba(200,200,200,1) 0%, rgba(200,200,200,0) 100%);
}

.card .actions {
  font-size: 40px;
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  border-radius: 0 0 10px 10px;
  background: rgb(200,200,200);
}

<div class="card">
  <div class="content">
    <h3>Title</h3>
    <p>Content, like Lorem Ipsum or something</p>
  </div>
  <div class="map">
    <img src="https://picsum.photos/seed/gradient/400/200/" alt="">
  </div>
  <div class="fading-gradient-bottom"></div>
  <div class="actions">
      ✅  
  </div>
</div>

Nice! I went for position:fixed; bottom:50px; and a weaker gradient and it works great, thanks! — Jimmy, Jul 20 '23 at 01:54

score 0 · Answer 2 · answered Jul 19 '23 at 12:01

what do you mean with 'But not above an element'. The navbar lays on top of everything and the content is behind that.

And the top part of the navbar fades away. This can be done in many ways, one example would be to use a gradient. See below.

body {
    background: black;
}

.nav {
    background: #F2F2F2;
    width: 100%;
    height: 8em;
    background: linear-gradient(0deg, #F2F2F2 80%, transparent);
    display: flex;
    padding-top: 2em;
    align-items: center;
    justify-content: space-evenly;
}

<div class="nav">
    <img style="height: 6em" src="https://cdn0.iconfinder.com/data/icons/mixed-ui-7/512/UI_20_home-512.png">
    <img style="height: 6em" src="https://cdn0.iconfinder.com/data/icons/mixed-ui-7/512/UI_20_home-512.png">
    <img style="height: 6em" src="https://cdn0.iconfinder.com/data/icons/mixed-ui-7/512/UI_20_home-512.png">
    <img style="height: 6em" src="https://cdn0.iconfinder.com/data/icons/mixed-ui-7/512/UI_20_home-512.png">
    <img style="height: 6em" src="https://cdn0.iconfinder.com/data/icons/mixed-ui-7/512/UI_20_home-512.png">
</div>

How to add transparent gradient ABOVE a bottom nav bar with css?

2 Answers2