How do you make the edges of a div transparent?

Question

I want to apply a color to div and on the sides of it it gets clearer until it’s transparent, you can do this with CSS?

Answer 1

Friend you can use a "linear gradient"

div { background-image: linear-gradient( to right,white, black 50%, 
white ); }

You define a percentage for the solid color that in case will stay in the middle and the sides lightening up to what shade you want. Of course it does not need to be 50% of the black div, you can put less if you prefer.

Answer 2

Pretty sure it was done with background-image: linear-gradient

Check on the Snippet:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: url(http://placecage.com/600/500) center no-repeat / cover;
}
div {
    margin: 10px auto;
    padding: 10px 50px;
    width: 50%;
    background-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    text-align: center;
    color: #fff;
}

<div>
    <h1>texto aqui</h1>
</div>

Answer 3

You can use box-shadow to apply this effect:

Okay, can’t do with box-shadow that shadow effect on the sides you want.

But you can use gradients in CSS, they’re kind of complex and each browser has a syntax, but an automatic generator can make this work easier: http://www.colorzilla.com/gradient-editor/

.blur-box {
  margin: 32px;
  padding: 10 -20%;
  text-align: center;
  width: 100px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+15,1+85,0+100 */
  background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 15%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 15%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
  color: white;
}

<div class="blur-box">INICIAR</div>