Ihab Abdel-Rahim Ihab Abdel-Rahim - 5 months ago 31
CSS Question

Create Blur solid colored background using CSS

I need help getting to apply glossy blur effect to solid color background using css:

<div class="container">
<div class="overlay">
Hello World!
</div>
</div>


.container {
background: blue;
width: 100%;
height: 300px;
}

.overlay {
color: #FFF;
padding: 20px;
}


JSFiddle: https://jsfiddle.net/znp73yr6/

Answer

Use code snippet below, that uses filter: blur(5px); for blur effect

.container {
    position: relative;
    width: 100%;
    height: 300px;
}

.blur {
    background: blue url(http://i.stack.imgur.com/fAcHL.jpg);
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    z-index: 1;
}

.overlay {
    color: #FFF;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}
<div class="container">
    <div class="blur"></div>
    <div class="overlay">
      Hello World!
    </div>
</div>