CSS blur one side of background

Question

So, I have a very simple div container.

.container{
  width:200px;
  height:100px;
  background-color:#dc5562;
}
.inside{
  width:150px;
  height:50px;
  margin:20px;
  background-color:rgba(50,80,115, 0.4);
  opacity: 1;
}

<div class="container">
  <div class="inside">
  </div>
</div>

I want to make the bottom part of the inside div blurry so that it appears to just blurred out or smoothed out (thus no sharp border line)

I found some helps online but they seem to work with background image.

Any help will be much appreciated!

Thanks!

you should check this http://stackoverflow.com/questions/27583937/how-can-i-make-a-css-glass-blur-effect-work-for-an-overlay — Sanjeev Kumar, Nov 16 '16 at 04:33
It would be better if you can show expected output's image.. — Mr_Green, Nov 16 '16 at 04:47

RizkiDPrast · Answer 1 · 2016-11-16T04:50:53.823

2

change your:

background-color:rgba(50,80,115, 0.4);

to

background:linear-gradient(to bottom,rgba(50,80,115, 0.4), rgba(50,80,115, 0.3),rgba(50,80,115, 0.2),rgba(50,80,115, 0));

edited Nov 16 '16 at 04:50

answered Nov 16 '16 at 04:41

RizkiDPrast

1,695
1
14
21

score 2 · Accepted Answer · answered Nov 16 '16 at 04:48

Try this one.

<!DOCTYPE html>
<html>

<head>
    <style>
 .container{
  width:200px;
  height:100px;
  background-color:#dc5562;
 }
 .inside{
  width:150px;
  height:50px;
  margin:20px;
  background: #985369;
  background: -moz-linear-gradient(top,  #985369 0%, #985369 50%, #985369 51%, #dc5562 100%);
  background: -webkit-linear-gradient(top,  #985369 0%,#985369 50%,#985369 51%,#dc5562 100%);
  background: linear-gradient(to bottom,  #985369 0%,#985369 50%,#985369 51%,#dc5562 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#985369', endColorstr='#dc5562',GradientType=0 );
 }
 </style>
</head>

<body>
    <div class="container">
        <div class="inside">

        </div>
    </div>
</body>

</html>

You can generate your own gradients here

score 2 · Answer 3 · answered Nov 16 '16 at 04:48

You could use gradients to get this effect.

More about linear-gradient

.container {
  width: 200px;
  height: 100px;
  background-color: #dc5562;
  position: relative;
}
.inside {
  width: 150px;
  height: 50px;
  margin: 20px;
  background: -webkit-linear-gradient(rgba(50, 80, 115, 0.4), #dc5562);
  background: -o-linear-gradient(rgba(50, 80, 115, 0.4), #dc5562);
  background: -moz-linear-gradient(rgba(50, 80, 115, 0.4), #dc5562);
  background: linear-gradient(rgba(50, 80, 115, 0.4), #dc5562);
}

<div class="container">
  <div class="inside">

  </div>
</div>

CSS blur one side of background

3 Answers3