Search code examples
htmlcsslinear-gradients

Linear gradient borders

enter image description here

I want to achieve this linear gradient borders using CSS I tried adding this:

.demo-mode {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62.72%);
  box-shadow: inset 0 100vw #111026;
  border: 1px solid transparent;
  border-radius: 24px;
}

But this is showing me left left and right borders and the bottom border not the top one.

.wrapper {
padding: 20px;
background: #111026;
}
.demo-mode {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62.72%);
  box-shadow: inset 0 100vw #111026;
  border: 1px solid transparent;
  border-radius: 24px;
  width: 250px;
  height: 250px
}
<div class="wrapper">
<div class="demo-mode"></div>
</div>

Solution

  • You can fix it by adding:

    background-origin: border-box;

    border-box
    The background is positioned relative to the border box.

    Here you can find more info about background-origin.

    Example:

    .wrapper {
  padding: 20px;
  background: #111026;
}

.demo-mode {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62.72%);
  background-origin: border-box;
  box-shadow: inset 0 100vw #111026;
  border: 1px solid transparent;
  border-radius: 24px;
  width: 250px;
  height: 250px
}
    <div class="wrapper">
  <div class="demo-mode"></div>
</div>