CODEWITHSUNDEEP
htmlcss
Ubya
Ubya

Reputation: 166

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

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>

Upvotes: 7

Views: 29179

Answers (3)

Tom Barbaro
Tom Barbaro

Reputation: 1

Here is how to fade a border using Styled Components. It is based on https://styled-components.com/docs/api

Other answers provided a way to animate the component but I just wanted to fade the border, not the component. After playing with it I realized that I just have to specify the border attribute.

import styled, { keyframes } from 'styled-components';

const fadeOut = keyframes`
    0% { border: 2px solid blue; };
    100% { border: 2px solid white; };
`

const MyStyle = styled.div`
    animation: ${fadeOut} ease 3s;
    transition-property: border-color;
    transition-duration: 0.5s;
`

Upvotes: 0

Александър
Александър

Reputation: 1

changes the color with fade effect 

#yourIDhere:hover{
    transition-property: border-color;
    transition-duration: 0.5s;
    border-color: #976958;
}

Upvotes: -1

Ian Hazzard
Ian Hazzard

Reputation: 7771

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>

Upvotes: 15

Related Questions