CSS to blur the background color into a light, opaque blue

Question

I have a div which sits in another div which I am trying to color the background of and have it be about 50% of the solid color #0F7BD5, and then blur into a more transparent version of that color. I have come up with this CSS but it's showing a sharp edge instead of the blur / fading effect that I'm trying to create. This is the CSS that I've come up with:

position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
-webkit-background-background-image: -webkit-linear-gradient(-180deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);
background-image: -moz-linear-gradient(270deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);
background-image: linear-gradient(270deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);

The colors in-between don't matter, as long as it starts with this #0F7BD5 with no transparency, and ends with this rgba(15,123,213,0.15).

can you show us all the code that deals with the divs and the css that goes along with it? — indubitablee, Sep 08 '15 at 15:30
This may be a duplicate: I think there are css and jquery animate solutions here: http://stackoverflow.com/questions/3242368/jquery-rgba-color-animations — Chad McGrath, Sep 08 '15 at 15:40

score 1 · Accepted Answer · answered Sep 08 '15 at 15:43

There is no need to specify extra color-stop positions as long as the colors in between do not matter. Just specify the start and end colors and that should be enough (first div in snippet). The browser would automatically split the colors evenly and gradually.

When you add extra color-stop positions in between, the gradient is forced to have the specified color at the specified point and this produces the sharp edge effect (second div in snippet). Sharp edges are produced because of uneven distribution of colors. For example, for the first 40% of the gradient, the alpha changes from 1 to 0.7 but for the next 5% (40% to 45%), it suddenly drops by 0.1.

div {
  position: relative;
  display: inline-block;
  height: 200px;
  width: 200px;
}
#gradual:after {
  position: absolute;
  content: '';
  right: 0px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  background-image: linear-gradient(270deg, #0F7BD5, rgba(15, 123, 213, 0.15));
}
#sharp:after {
  position: absolute;
  content: '';
  right: 0px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  background-image: linear-gradient(270deg, #0F7BD5 0, rgba(15, 123, 213, 0.7) 40%, rgba(15, 123, 213, 0.6) 45%, rgba(15, 123, 213, 0.52) 50%, rgba(15, 123, 213, 0.4) 55%, rgba(15, 123, 213, 0.3) 59%, rgba(15, 123, 213, 0.2) 63%, rgba(15, 123, 213, 0.15) 100%);
}

<div id="gradual"></div>
<div id="sharp"></div>

CSS to blur the background color into a light, opaque blue

1 Answers1