cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="wrapper">

<div class="boxshadow" id="box">
    <h2>CSS3 code generator</h2>
    <h3>box-shadow</h3>
    <p>Try and experiment with box-shadows, use the "surprise me" function or try one of the nicely arranged pre-sets</p>  
    <div class="codebox">
       <div id="snippet"></div>
    </div>
    <p style="font-size: 70%">As seen on <a href="http://www.selfhtml5.org/2013-css3/box-shadow-generator/">selfHTML5: CSS3 box-shadow generator</a> </p>
    
</div>



 <div style="background: white" class="params">
    <h3>pre sets</h3>
    <div style="box-shadow: 5px 5px #333" class="swatch"></div>hard light
    <hr class="dotted">
     <div style="box-shadow: 5px 5px 3px #666" class="swatch"></div> soft
    <hr class="dotted">     
      <div style="box-shadow: 0px 0px 5px #444" class="swatch"></div> from above
          <hr class="dotted">
       <div style="box-shadow: 0px 8px 6px -6px #666" class="swatch"></div> reduced
           <hr class="dotted">
       <div style="box-shadow: inset 0px 0px 10px #666" class="swatch"></div> inset
           <hr class="dotted">
       <div style="box-shadow: 0px 0px 10px -2px #FFF" class="swatch"></div> glow
   </div>



	<div class="params ">
    <h3>box-shadow parameters</h3>
    
            <div class="row0">
                <div class="minus">-</div>
                <input value="3" size="3" id="offX">
                <div class="plus">+</div>
                <label>Offset X</label>

            </div>

            <div class="row1">
                <div class="minus">-</div>
                <input value="3" size="3" id="offY"> 
                <div class="plus">+</div>
                <label>Offset Y</label>
            </div>    

           <div class="row0">
               <div class="minus">-</div>
                <input value="3" size="3" id="blur">
                <div class="plus">+</div>
                <label>Blur</label>
            </div>

            <div class="row1">
                <div class="minus">-</div>
                <input value="3" size="3" id="spread"> 
                <div class="plus">+</div>
                <label>Spread</label>
            </div>    

            <div class="row0">
               &nbsp; #<input value="555555" size="6" id="color"> <label>Color (HEX)</label>
            </div>

            <div class="row1">
                <input type="checkbox" value="inset" id="inset"><label>inset</label>
            </div>    
            
            <br />
			<button id="surprise" class="button">Surprise Me!</button>
    </div>

<hr style="clear: both; display:block; visibility: hidden; height: 30px" />
 </div>  

   
  

            
          
!
            
              
#wrapper { 
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	background: #eee;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjOWU5ZTllIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiM4ODgiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=");	
	height: 100%;
	margin: 0;
}
h2, h3 {margin: 0 0 6px}

#box {
	width: 40%; float: left; padding: 16px;	
	margin: 25px
}
.boxshadow {border-radius: 8px border: 1px solid #fff; background: #ddd; }

a.button {cursor: pointer} 
.row0, .row1 {padding: 3px}
.row1 {background: #222}
.minus, .plus {background: silver; 
			background-image: linear-gradient(to bottom , #eee 0%, #ddd 50%, #bbb 50%,  #ddd 100%);
color: #111; font-weight:  bold; padding:  2px 3px; display: inline-block; width: 15px; cursor: pointer; text-align: center; border-radius: 2px}

#settings {float: right; width: 170px; background: #EEE; padding: 5px; border: 1px solid white; box-shadow: 0px 0px 5px #888; font-size: 85%; line-height: 1.1em}
#settings input {margin: 0; line-height: 1.1em }
#settings h4 {font-weight: bold; margin-bottom: 3px}

.codebox {padding: 15px; background: #ffc; border: 1px dotted #ccc;}
#snippet { font-style: italic}
.swatch {width: 30px; height: 30px; display: inline-block; background: #e2001a; margin-right: 20px; cursor:pointer}
hr.dotted {clear: both; display: block; height: 0; border-bottom: 1px dotted #ccc}

.params {
	width: 20%;
	margin: 25px 10px 0;
	border-radius: 12px;
	border: 8px solid #04d3ff;
	background-color: #111 ;
	padding: 8px;
	float: right;
	color: #999;
	font-size: 80%;
}

            
          
!
            
              $(document).ready(function() {

        $('div.params input').blur(function(){
          setShadow();
        })
 
        $('#inset').click(function(){
           setShadow();
        })
 
        $('div.minus').click(function(){
             var toChange = $(this).next();
             toChange.val( parseInt(toChange.val()) -1 );
             setShadow();
        })
 
         $('div.plus').click(function(){
             var toChange = $(this).prev();
             toChange.val( parseInt(toChange.val()) +1 );
             setShadow();
        })
        
        $('#surprise').click(function(){
           setRandom();
           setShadow();
        })        
  
        $('#variants').click(function(){
           for (var c=0; c < 5; c++) {
               // boxshadow     offsetX           offsety              blur                             spread
               var shdw2 = rndnr('15') + 'px ' + rndnr('15') + 'px ' + Math.abs(rndnr('30')) + 'px ' + rndnr('10') + 'px ' + '#' + $('#color').val();           
               var html = "<div class='box' style='box-shadow: "+shdw2+"'>"+shdw2+"</div>";
               $('div.entry-content').append(html);
           }
        })     
     
       
        $('div.swatch').click(function(){
            $('#box').attr('style', $(this).attr('style'));
            $('#snippet').html($(this).attr('style'));
        })
 
 
        function setShadow () {
            var b = $('#box'); var shdw = '';
            
            if ($('#inset').is(':checked')) {
                shdw += 'inset ';
            }           
                shdw += $('#offX').val()+'px '+$('#offY').val()+'px '+$('#blur').val()+'px '+$('#spread').val()+'px #'+$('#color').val();
            
            b.css('box-shadow', shdw);
            $('#snippet').html('box-shadow: '+shdw);
        }
 
 
        function setRandom() {
            $('#offX').val(rndnr('15'));
            $('#offY').val(rndnr('15'));
            $('#blur').val(Math.abs(rndnr('30')));
            $('#spread').val(rndnr('10'));
            
            // inset
            var rndInset = Math.random();
            if (rndInset < .6) { $('#inset').attr('checked', false); } else { $('#inset').attr('checked', true); } ;
        }
 
        function rndnr(range) {
            var randomNum = Math.ceil(Math.random()* range)
            var vz = Math.random();
            if (vz < .5) randomNum = -1 * randomNum;          
            return randomNum;
        }

 setShadow();
});

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console