CODEWITHSUNDEEP
cssgradientlinear-gradients
Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Element with gradient and border

I have html like this

<div class="bottom-content">
Here goes some content
Here goes some content
Here goes some content
Here goes some content
Here goes some content
Here goes some content
Here goes some content
Here goes some content
Here goes some content 
</div>

And css like this

.bottom-content{
  width: 100%;
  height: 19px;
  border-top: 1px rgba(red, 0.2);
  box-shadow: 0 -19px 19px 0 blue !important;
  opacity: .6;
}

The problem is that has to be some kind of gradient and border, this way entire element is in opacity

This is how border or bottom gradient should look like

enter image description here

Upvotes: 0

Views: 49

Answers (1)

Temani Afif
Temani Afif

Reputation: 274262

This sounds a good job for a blur filter:

.bottom-content {
  padding:10px;
  position:relative;
  z-index:0;
}
.bottom-content::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lightblue;
  filter:blur(6px);
}
<div class="bottom-content">
  Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content
</div>

Like below for only border:

.bottom-content {
  padding:10px;
  position:relative;
  z-index:0;
}
.bottom-content::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:8px solid lightblue;
  filter:blur(5px);
}
<div class="bottom-content">
  Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content
</div>

And it also work for only one border:

.bottom-content {
  padding:10px;
  position:relative;
  z-index:0;
}
.bottom-content::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-bottom:8px solid lightblue;
  filter:blur(5px);
}
<div class="bottom-content">
  Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content
</div>

Upvotes: 2

Related Questions