CODEWITHSUNDEEP
htmlcsslinear-gradients
Borislav Stefanov
Borislav Stefanov

Reputation: 731

CSS - fading gradient border from-to

I want to make my whole div section with fading border. Here is my code:

.usermanagement {
  -webkit-border-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#fff),
      to(#afd4ec),
      color-stop(0.2, #afd4ec)
    )
    0 0 0 0 repeat repeat;
}

The effect is exactly what I want but only for top:

enter image description here

Then all goes to light blue and finishes like this: enter image description here

Without this fading effect. I want to make the same effect as in the top for the bottom end of the section. How it is possible?

Upvotes: 0

Views: 257

Answers (1)

Temani Afif
Temani Afif

Reputation: 272965

You can try like below. make sure to correctly set the different values.

.box {
  height:50px; /* this need to be a multiple of 10 for the effect to work */
  border-top:   10px solid;
  border-bottom:10px solid;
  background:#f2f2f2;
  border-image:repeating-linear-gradient(#fff 0,red 10px) 10;
}
<div class="box"></div>

You can also do it with multiple background:

.box {
  height:50px;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  background:
   linear-gradient(#fff ,red ) top,
   linear-gradient(#fff ,red ) bottom, /* use (red, #fff) here for the opposite effect */
   #f2f2f2;
  background-size:100% 10px;
  background-origin:border-box;
  background-repeat:no-repeat;
}
<div class="box"></div>

Upvotes: 1

Related Questions