Element with gradient and border

Question

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

this question have been answered here: https://stackoverflow.com/questions/2717127/gradient-borders — farid, May 08 '20 at 18:59

Temani Afif · Accepted Answer · 2020-05-09T16:13:25.813

2

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>

edited May 09 '20 at 16:13

answered May 08 '20 at 19:54

Temani Afif

245,468
26
309
415

This has to be just border and not entire content – Miomir Dancevic May 09 '20 at 15:59
@MiomirDancevic you can make it just border: https://jsfiddle.net/fpumd8n3/ – Temani Afif May 09 '20 at 16:02
Great can youst be bottom border, make answer like that that i can accept answer thanks – Miomir Dancevic May 09 '20 at 16:11
This is ok, but not possible on flex display, or maybe you can help me with that also – Miomir Dancevic May 09 '20 at 17:14
@MiomirDancevic show the code you are using, display:flex is irrelevant to my solution and it should work fine – Temani Afif May 09 '20 at 18:04
.bottom-content{ flex: 1 1 auto !important; display:flex;} On this one it is not working – Miomir Dancevic May 09 '20 at 18:30
@MiomirDancevic share a full working code: https://jsfiddle.net/ – Temani Afif May 09 '20 at 18:48
@MiomirDancevic you are missing two properties in the parent element – Temani Afif May 09 '20 at 19:05

Element with gradient and border

1 Answers1