Saved!

Box Shadow CSS Generator | codesheet.org - XqbUiA9V

Box Shadow CSS Generator The ultimate CSS tools for web designers Gradient Generator Border Radius Noise Texture Box Shadow Horizontal Length px Vertical

css box shadow generator

  
<div class="col-100-max">
  <div class="col-50 p30 editor">
     
    <div class="col-50 p10">
      <label>Horizontal Length</label>
      <input type="range" id="x1" min="-100" max="100" value="5">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="x11">
    </div>
    <div class="clear bgg"></div>
      
    <div class="col-50 p10">
      <label>Vertical Length</label>
      <input type="range" id="x2" min="-100" max="100" value="5">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="x22">
    </div>
    <div class="clear bgg"></div>
      
    <div class="col-50 p10">
      <label>Blur Radius</label>
      <input type="range" id="x3" min="0" max="100" value="5">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="x33">
    </div>
    <div class="clear bgg"></div>

    <div class="col-50 p10">
      <label>Spread Radius</label>
      <input type="range" id="x4" min="-100" max="100" value="0">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="x44">
    </div>
    <div class="clear bgg"></div>

    <div class="col-50 p10">
      <label>Inset</label>
      <input type="checkbox" id="inset" value="inset">
        <div class="clear"></div>
    </div>
    <div class="col-50 p10 pt20">
    </div>
    <div class="clear bgg"></div>

    <div class="col-100 p10">
      <label>Shadow Color</label>
      <input type="color" id="color" value="#333333">
        <div class="clear"></div>
    </div>
    <div class="col-100 p10 pt20">
		HEX <input type="text" class="hex" id="hex" size="7" maxlength="7" value="#333333">
	</div>  
    <div class="col-100 p10 pt20">
    RGBA 
R:<input type="text" class="rgb" id="r" name="r" size="3">
G:<input type="text" class="rgb" id="g" name="g" size="3">
B:<input type="text" class="rgb" id="b" name="b" size="3">    
    
    
    
    </div>
    <div class="clear bgg"></div>
 
    
  <div class="col-50 p10">
      <label>Opacity</label>
      <input type="range" id="opacity" min="0" max="100" value="77">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="xopacity">
    </div>
    <div class="clear bgg"></div>

	  
    <div class="col-100 p10 bcg">
      <label>Box Color</label>
      <input type="color" id="boxcolor" value="#fcc42a">
<input type="text" id="boxhex" class="hex" size="7" maxlength="7" value="#fcc42a">
        <div class="clear"></div>
    </div>

   
    
  </div>


  <div class="col-50">
  <h1>Box Shadow CSS Generator</h1>
   <div class="shadow-box">
    </div>
    <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