Menu
I have read a lot of topic about this problem but nothing has worked so far. the easiest method I have read about involves using box-shadow, but this results in the shadow having a different color to the box even though the code of the color is the same (#141414).
Question
How can I get a fade-out/blur border for a div box? It's quite hard to explain in writing so I made this image to give you the idea (ignore the background). If you look closely you can see the blending and the color is uniform, fading to transparent.
box-shadow as i said, doesn't work for me.
body {
background-image:url('http://phptesting.altervista.org/tessuto.png');
background-repeat: repeat;
}
div {
width: 300px;
height: 300px;
background-color: #141414;
border: 2px solid #141414;
box-shadow: 0 0 5px 5px #141414;
border-radius: 10px;
}<html>
<body>
<div></div>
</body>
</html>
867
box-shadow IS actually the only CSS way to get this effect. Try something like this:
div {
margin: 25px 10px;
width: 100px;
height: 100px;
background: #141414;
box-shadow: 0 0 15px 10px #141414;
}<div></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
