Contents

<section id="radial-gradient">
  <h2>Radial Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_radial-gradient.scss">View source</a></h2>
  <p>Takes up to 10 gradients. See also the <a href="#background-image">background-image mixin</a>.</p>
  <p>This mixin will output a fallback <code>background-color: #first-color;</code> declaration. A <code>$fallback</code> argument can be passed to change the fallback color.</p>

{% highlight scss %}
@include radial-gradient(#1e5799, #3dc3d1);
@include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
@include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef, $fallback: red);
{% endhighlight %}

<br>
<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
<br>
<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code>, <code>$deprecated-radius1</code>, <code>$deprecated-radius2</code></p>

{% highlight scss %}
@include radial-gradient(#1e5799, #3dc3d1,
                         $deprecated-pos1: left center, $deprecated-pos2: left top,
                         $deprecated-radius1: 50, $deprecated-radius2: 360);
{% endhighlight %}

  <h3>Demo</h3>
  <section class="demo">
  </section>
</section>

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
bourbon-2.1.0	_includes/radial-gradient.html