Saved!

CSS Gradient Background Colors - UfZ813RY

CSS Gradient Background Colors CSS CSS3 Frontend Development

CSS Gradient Background Colors

  
<div class="col-100-max tac">
  <h1>CSS Gradient Generator</h1>



	
  <div class="box-outer">
    <div class="box box-1">
      <div class="copy-btn" data-one="f42e78" data-two="c17afc">Copy</div>
    </div>
    <div class="colors">
      <div class="first">#f42e78</div>
      <div class="second">#c17afc</div>
    </div>
  </div>
  
  <div class="box-outer">
    <div class="box box-2">
      <div class="copy-btn" data-one="fec180" data-two="ff8993">Copy</div>
    </div>
    <div class="colors">
      <div class="first">#fec180</div>
      <div class="second">#ff8993</div>
    </div>
  </div>
  
  <div class="box-outer">
    <div class="box box-3">
      <div class="copy-btn" data-one="6681ea" data-two="7e43aa">Copy</div>
    </div>
    <div class="colors">
      <div class="first">#6681ea</div>
      <div class="second">#7e43aa</div>
    </div>
  </div>
  
  <div class="box-outer">
    <div class="box box-4">
      <div class="copy-btn" data-one="efbad3" data-two="a254f2">Copy</div>
    </div>
    <div class="colors">
      <div class="first">#efbad3</div>
      <div class="second">#a254f2</div>
    </div>
  </div>
  
  <div class="box-outer">
    <div class="box box-5">
      <div class="copy-btn" data-one="f3dcfb" data-two="679fe4">Copy</div>
    </div>
    <div class="colors">
      <div class="first">#f3dcfb</div>
      <div class="second">#679fe4</div>
    </div>
  </div>
  
  <div class="box-outer">
    <div class="box box-6">
      <div class="copy-btn" data-one="d0ffae" data-two="34ebe9">Copy</div>
    </div>
    <div class="colors">
      <div class="first">#d0ffae</div>
      <div class="second">#34ebe9</div>
    </div>
  </div>
  
  <div class="box-outer">
    <div class="box box-7">
      <div class="copy-btn" data-one="ff839d" data-two="f50b9a">Copy</div>
    </div>
    <div class="colors">
      <div class="first">#ff839d</div>
      <div class="second">#f50b9a</div>
    </div>
  </div>
  
  <div class="box-outer">
    <div class="box box-8">
      <div class="copy-btn" data-one="6acbe0" data-two="6859ea">Copy</div>
    </div>
    <div class="colors">
      <div class="first">#6acbe0</div>
      <div class="second">#6859ea</div>
    </div>
  </div>
  
  
  <div class="clear"></div>

  
 
  

  </div>

  
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js