Saved!

CSS Gradient Generator - C1rEXfRT

CSS Gradient Generator HTML CSS JavaScript jQuery

CSS Gradient Generator

  
<div class="col-100-max tac">
<div class="wrap tac bcg bsb bgl p20">
  <h1>CSS Gradient Generator</h1>

  <div class="box-outer-generator">
    <div class="box-generator">

	  <select class="orientation hide">
        <option value="top">vertical&nbsp;&nbsp;&uarr;</option>
        <option value="left">horizontal&nbsp;&nbsp;&larr;</option>
        <option value="right">horizontal&nbsp;&nbsp;&rarr;</option>
        <option value="bottom">vertical&nbsp;&nbsp;&darr;</option>
        <option value="topleft">diagonal&nbsp;&nbsp;&nwarr;</option>
        <option value="topright">diagonal&nbsp;&nbsp;&nearr;</option>
        <option value="bottomleft" selected>diagonal&nbsp;&nbsp;&swarr;</option>
        <option value="bottomright">diagonal&nbsp;&nbsp;&searr;</option>
        <option value="radial">radial&nbsp;&nbsp;○</option>
        <option value="radialreverse">radial&nbsp;&nbsp;○ &lrarr;</option>   
	  </select>
		
		
	  <button class="ori-btn positontopleft" data-id="topleft">&searr;</button>
      <button class="ori-btn positontop" data-id="top">&darr;</button>
      <button class="ori-btn positontopright" data-id="topright">&swarr;</button>
	  <div class="clear"></div>

      <button class="ori-btn positonleft" data-id="left">&rarr;</button>
      <button class="ori-btn positonradial" data-id="radial">&compfn;</button>
      <button class="ori-btn positonright" data-id="right">&larr;</button>
	  <div class="clear"></div>

      <button class="ori-btn ori-btn-active positonbottomleft" data-id="bottomleft">&nearr;</button>
      <button class="ori-btn positonbottom" data-id="bottom">&uarr;</button>
      <button class="ori-btn bottomright" data-id="bottomright">&nwarr;</button>
      <div class="clear"></div>

		
		
		
    </div>
    <div class="gen">
      <div class="col-50 tac">
		  
		  <input type="color" id="color1" value="#3af3af">
		  <input type="text" class="hex" id="hex1" size="7" maxlength="7" value="#3af3af">

		<div class="range-slider">
		  <input class="range-slider__range" type="range" id="x1" value="0" min="0" max="100">
      	  <input type="hidden" id="x11" value="0">
		  <span id="x111" class="range-slider__value">0%</span>
		</div>
		  
		  
		  
	  </div>
      <div class="col-50 tac">

		  
		  <input type="color" id="color2" value="#33aaff">
		  <input type="text" class="hex" id="hex2" size="7" maxlength="7" value="#33aaff">

		  <div class="range-slider">
  			<input class="range-slider__range" type="range" id="x2" value="100" min="0" max="100" step="1">
      	  	<input type="hidden" id="x22" value="100">
  			<span id="x222" class="range-slider__value">100%</span>
		</div>  
		  
	</div>
	
    </div>		   	  

  </div>

	

	
  <div class="box-outer">
    <div class="box generator">
      <div class="copy-btn" data-one="3af3af" data-two="33aaff">Default</div>
    </div>
    <div class="colors">
      <div class="first">#f42e78</div>
      <div class="second">#c17afc</div>
    </div>
  </div>
 
  
  
  <div class="clear"></div>

  </div>

	
	
	
	
	
	
	
<div class="wrap tac bgl">
  <h2>Example</h2>

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


  </div>
	
	
	
	
	
	
	
	
	
	
	

  <div class="col-100-max p20">


    <textarea class="shadow-box-css bsb bcg"></textarea>
  <div class="copy">Click to Copy to Clipboard</div>


</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