Resize the radius of a centred radial gradient

问题

I'm restyling my current project and found a simple way to fade the left and right edges of my div background by using the following. I've been experimenting trying to edit the radius of the centered circle, to make it smaller. I can't seem to alter it, without the whole gradient style disappearing.

I'm trying to set the yellow area as the background of the text with less gradual fade to transparent. What do I need to do to get more transparent and less colored circle?

  background-image: radial-gradient(center center, circle cover, #ffeda3, transparent);
  background-image: -o-radial-gradient(center center, circle cover, #ffeda3, transparent);
  background-image: -ms-radial-gradient(center center, circle cover, #ffeda3, transparent);
  background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, transparent);
  background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, transparent);

回答1:

The way to resize the radius of a radial gradient is by specifying the color stop percentages. That is, we need to specify where one color has to end and the other color has to start.

In the gradient that you have mentioned in question, no color stop percentage is mentioned and hence each circle that is drawn from the center of the element has a color that progresses from #ffeda3 to transparent.

background-image: radial-gradient(center center, circle cover, #ffeda3, transparent);

Possible Solutions

Now depending on how you want the actual gradient to look like you can use any of the three methods that I have provided in the below snippet:

div.hard-stop {
  text-align: center;
  background-image: -moz-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
  background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);  
  background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
}

div.gradual-1 {
  text-align: center;
  background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
  background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, transparent 30%);  
  background-image: radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
}

div.gradual-2 {
  text-align: center;
  background-image: -moz-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
  background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);  
  background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
}

/* Just for demo */
body {
  background: black;
}
div{
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="hard-stop">
  <a href="#">Test</a>
  <a href="#">Test 2</a>
  <a href="#">Test 3</a>
</div>

<div class="gradual-1">
  <a href="#">Test</a>
  <a href="#">Test 2</a>
  <a href="#">Test 3</a>
</div>

<div class="gradual-2">
  <a href="#">Test</a>
  <a href="#">Test 2</a>
  <a href="#">Test 3</a>
</div>

Explanation

There are three different gradients used in the above snippet and below is an explanation of each of them:

Hard-stop Gradient:

background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);

This is a hard-stop gradient. That is, till 30% of the parent element all 1px circles are of color #ffeda3 and all 1px circles after that are transparent. As you can see there is a hard switch over of colors at 30% mark.

Gradual - 1:

background-image: radial-gradient(center center, circle cover, #ffeda3, transparent 30%);

This has a gradual movement till it reaches transparency. The first 1px circle has color #ffeda3 and the color of each 1px circle after it is determined such that at 30% mark color becomes transparent. After 30% the color of the gradient remains as transparent.

Gradual - 2:

background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);

This gradient has color as #ffeda3 from the first 1px circle till 30% of the container. From 30% mark to the 35% mark, color of each 1px circle changes progressively from #ffeda3 to transparent. From 35%, the color of each 1px circle remains as transparent.

来源：https://stackoverflow.com/questions/32143108/resize-the-radius-of-a-centred-radial-gradient

标签

css

css3

radial-gradients