Creating a line that fades out / becomes transparent in every direction

user_13424886 0
Viewed 40

I'm trying to create a line, using gradients, that becomes transparent towards every side, similar to this: Image - A vertical, bright line, that fades into the background on all sides

I have come somewhat close to recreating that. Image - The same except for some minor differences

In my best attempt, as seen above, I cheated and set the sides to the background-color:

.outer-div:before {
    content: "";
    background:
        /* sides same color as background */
        linear-gradient(to right, rgba(100, 100, 90, 1), rgba(0, 0, 0, 0), rgba(100, 100, 90, 1)),
        linear-gradient(rgba(100, 100, 90, 1) 0, rgba(0, 0, 0, 0) 20% 80%, rgba(100, 100, 90, 1) 100%),
        /* the actual color */
        /*rgba(149, 147, 132, 1);*/
        /* changed to white so it's easier to see */
        rgba(255, 255, 255, 1);
    float: left;
    /* again, changed from 5 to 20px so it's easier to see */
    width: /*5px;*/ 20px;
    height: 112px;
}
<div class="outer-div">
  A div with some text<br/>
  text<br/>
  text<br/>
  text<br/>
  text<br/>
  text
</div>

And that's the best I could come up with.

Has anyone got any idea on how to get the sides to be actually transparent?

gradient css
1 Answers

The easiest way is probably to use a blur on a gradient.

div::before {
  content: '';
  display: block;
  width: 10px;
  height: 150px;
  background: linear-gradient(to bottom, transparent, black 20%, black 50%, transparent);
  filter: blur(3px);
}
<div></div>

user_145451600
Related