how to fade-out/blur div's borders with css?


Tags: html,css,css3

Problem :

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.

enter image description here 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>



Solution :

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>


    CSS Howto..

    How to change the color of Bootstrap links

    CSS how to make an element fade in and then fade out?

    How to set two directions for flex-box css?

    CSS How to set div height 100% minus nPx

    How to change CSS according time with JavaScript

    How can I exclude some images from being preloaded

    css: How to select first anchor tag inside table

    How to functionalize countdown?

    How can I vertically center this css/javascript based modal dialog?

    How to create dynamic responsive four columns with border style?

    How to center field_with_errors class

    How to apply CSS using User Scripts

    How to get a heading to scale with a image and keep spacing ratio html/css

    How determine css text of each node in html

    How to overcome Selenium CSS parent only CSS selector limitation

    Border display issue, not sure how to resolve

    How do I trigger the popup dialog box automatically from iWebkit?

    How can I apply a font type to everything using css

    css how to make this div at the bottom of another div [duplicate]

    How to make a CSS Menu “Selected” with Hover Image Gallery Effect?

    How do I isolate an image from the html so that I can edit where it goes on the website?

    how to display a list inline using HTML and CSS

    CSS - how do I float another div over another without overlapping

    How to transform (move whole child dives) div to max width with css?

    In Wordpress how can I create a page which has 3 col-md-4 blocks in a container?

    How can I remove borders around images on Blogger? [closed]

    How may I stack multiple html/css buttons vertically along the center of the page?

    How to have “onmouseover” highlight in css?

    contenteditable does not show pseudoselector :before in safari

    how to combine css with php while loop and table?