<p dir="auto">For example the button <code class="notranslate">.btn</code>, if the gradients was transparent gradient over the then it would be as simple job of changing the color instead of duplicating the all of browser hacks each time.</p>
<p dir="auto">Code examples: <a href="http://stackoverflow.com/a/2293931/560287" rel="nofollow">http://stackoverflow.com/a/2293931/560287</a></p>
<p dir="auto">From: <a href="http://www.colorzilla.com/gradient-editor/" rel="nofollow">http://www.colorzilla.com/gradient-editor/</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="background: -moz-linear-gradient(top,  rgba(0,0,0,0.065) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.065)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.065) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0.065) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0.065) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0.065) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c000000', endColorstr='#00000000',GradientType=0 ); /* IE6-8 */"><pre class="notranslate"><code class="notranslate">background: -moz-linear-gradient(top,  rgba(0,0,0,0.065) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.065)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.065) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0.065) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0.065) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0.065) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c000000', endColorstr='#00000000',GradientType=0 ); /* IE6-8 */
</code></pre></div>
<p dir="auto">Fiddle: <a href="http://plnkr.co/edit/A0j1eww3CEbmcKYzC74Z?p=preview" rel="nofollow">http://plnkr.co/edit/A0j1eww3CEbmcKYzC74Z?p=preview</a></p>
<p dir="auto">I have some modal windows in my Rails project. And I have a problem with background.</p>
<p dir="auto">Generated HTML with duplicated background:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;modal-backdrop fade in&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;modal-backdrop fade in&quot;&gt;&lt;/div&gt;
&lt;/body&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="modal-backdrop fade in"&gt;&lt;/div&gt;
&lt;div class="modal-backdrop fade in"&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre></div>
<p dir="auto">I don't know what's wrong.</p>
<p dir="auto">My gems</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="group :assets do
  gem 'sass-rails',   '3.2.5'
  gem 'coffee-rails', '~&gt; 3.2.2' 
  gem 'uglifier', '&gt;= 1.2.6'

  gem 'bootstrap-sass', '~&gt; 2.1.1.0'
end"><pre class="notranslate"><code class="notranslate">group :assets do
  gem 'sass-rails',   '3.2.5'
  gem 'coffee-rails', '~&gt; 3.2.2' 
  gem 'uglifier', '&gt;= 1.2.6'

  gem 'bootstrap-sass', '~&gt; 2.1.1.0'
end
</code></pre></div>