Création d'une ligne qui s'efface / devient transparente dans toutes les directions

Question

J'essaie de créer une ligne, en utilisant des gradients, qui devient transparente de chaque côté, comme ceci : Image - Une ligne verticale, lumineuse, qui s'estompe dans l'arrière-plan de tous les côtés.

J'ai presque réussi à recréer cette situation. Image - Identique à quelques différences mineures près

Dans ma meilleure tentative, comme on peut le voir ci-dessus, j'ai triché et j'ai fixé les côtés à la couleur d'arrière-plan :

.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>

Et c'est le mieux que j'ai pu faire.

Quelqu'un a-t-il une idée sur la manière de rendre les côtés transparents ?

Answer 1

La manière la plus simple est probablement d'utiliser un blur sur un 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>