steve Kim steve Kim - 24 days ago 10
CSS Question

CSS blur one side of background

So, I have a very simple div container.

https://jsfiddle.net/ma47fbut/

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


And css:

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


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!

Answer

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