css Question posted in
Some basic documentation can be found here.

CSS gradiant border bottom

I am stuck with something.
Using Bootstrap 5 navbar, I try to make a simple a simple 40px hight vertical border bottom, going from color #e5e5e5 to color #fefefe
Here is the sample image:

enter image description here

Thank you if you have a final idea because I am fighting with that without any success 🙁

Thank you very much.

Tags:

2

Answers


  1. 0

    I have tried to solve ur issue.

    <html lang="en">
<head>
  <!-- Add Bootstrap CSS link here -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .custom-navbar {
      position: relative;
    }

    .navbar-border {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40px;
      background: linear-gradient(to right, #e5e5e5, #fefefe);
      content: "";
      z-index: -1;
    }
  </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light custom-navbar">
  <!-- Your navbar content goes here -->
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Your Logo</a>
    <!-- Add other navbar elements as needed -->
  </div>
  <div class="navbar-border"></div> <!-- This div creates the border -->
</nav>

<!-- Add Bootstrap JS and Popper.js scripts here -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
    Login or Signup to reply.
  2. 0

    Borders cannot have gradients (yet).

    Use either a drop-shadow filter or a pseudo-element.

    The drop-shadow effect is really what you are after so adjust the color as required.

    Drop-shadow

    header {
  height: 75px;
  background: lightblue;
  margin-bottom: 1em;
}

.filter {
  filter: drop-shadow(0px 5px 5px grey)
}
    <header class="filter"></header>

    Pseudo-element

    header {
  height: 75px;
  background: lightblue;
  margin-bottom: 1em;
}

.pseudo {
  position: relative;
}

.pseudo:before {
  content: "";
  position: absolute;
  top: 100%;
  width: 100%;
  left: 0;
  height: 40px;
  background: linear-gradient(#e5e5e5, #fefefe);
}
    <header class="pseudo"></header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search