Contents

<section id="linear-gradient">
  <h2>Linear Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_linear-gradient.scss">View source</a></h2>
  <p>Gradient Position is optional, default is <code>top</code>. Position can be a degree (<code>90deg</code>). Mixin supports up to 10 color-stops.</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 linear-gradient(#1e5799, #2989d8);
@include linear-gradient(top, #8fdce5, #3dc3d1);
@include linear-gradient(top, #8fdce5, #3dc3d1, $fallback: red);
@include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
{% 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></p>

{% highlight scss %}
@include linear-gradient(#1e5799, #3dc3d1, $deprecated-pos1: left center, $deprecated-pos2: left top);
{% 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/linear-gradient.html