Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="thechild"><div class="clothing"><div></div></div></div>
              
            
!

CSS

              
                :root {
	--skin: #949971;
	--skin-shadow: rgba(54,44,36,0.4);
	--skin-shadow-soft: rgba(54,44,36,0.2);
	--skin-highlight: #b6bb9b;
	--ear-inner: #b55b37;
  --fabric: #96776c;
}

#thechild {
	width: 317px;
	height: 256px;
	background: radial-gradient(ellipse at -10% 200%, #262626, transparent 48%), radial-gradient(ellipse at 0% 200%, #262626, transparent 47%), radial-gradient(ellipse at 55.5% 51%, var(--skin-highlight), var(--skin) 3%, transparent 15%), radial-gradient(circle at 63.5% 30.5%, var(--skin), var(--skin) 13.5%, transparent 14%), radial-gradient(circle at 63.5% 28%, var(--skin-shadow-soft), var(--skin-shadow-soft) 12%, transparent 12.5%), radial-gradient(circle at 46.5% 29%, var(--skin), var(--skin) 13%, transparent 13.5%), radial-gradient(circle at 46.5% 27%, var(--skin-shadow-soft), var(--skin-shadow-soft) 12%, transparent 12.5%), radial-gradient(ellipse at 55% 52%, var(--skin) 2%, var(--skin-shadow) 6%, transparent 8%), radial-gradient(circle at 42% 100%, transparent 70%, var(--skin-highlight) 76%), radial-gradient(circle at 36% 80%, transparent 70%, var(--skin-highlight) 78%),radial-gradient(circle at 36% 48%, var(--skin), var(--skin) 26%, transparent 26.5%) ,radial-gradient(circle at 33.5% 48.5%, var(--skin), var(--skin) 26%, transparent 26.5%), radial-gradient(circle at 33% 46%, var(--skin-shadow-soft), var(--skin-shadow-soft) 24%, transparent 24.5%) ,radial-gradient(circle at 75% 46.5%, var(--skin), var(--skin) 22%, transparent 22.5%), radial-gradient(circle at 76% 44%, var(--skin-shadow-soft), var(--skin-shadow-soft) 20%, transparent 20.5%), var(--skin);
	margin: auto;
	position: relative;
	margin-top: 70px;
	border-radius: 50%;
	transform: rotateZ(8deg);
	box-shadow: 122px 70px 0 -115px var(--skin), -90px 78px 0 -115px var(--skin), -108px 70px 0 -115px var(--skin), -318px -22px 0 -117px var(--ear-inner), -140px 94px 0 -108px #b8ac9d, -318px -22px 0 -117px var(--ear-inner), -305px -17px 0 -110px var(--ear-inner), -290px -10px 0 -110px var(--ear-inner), -265px -4px 0 -100px var(--ear-inner), -220px 5px 0 -80px var(--ear-inner),-95px 37px 0 -80px var(--ear-inner), -140px 15px 0 -80px var(--ear-inner), 150px 38px 0 -100px var(--ear-inner), 170px 24px 0 -100px var(--ear-inner), 200px 34px 0 -100px var(--ear-inner), 240px 44px 0 -100px var(--ear-inner), 305px 57px 0 -120px var(--ear-inner), 270px 58px 0 -100px var(--ear-inner), 125px -40px 0 -120px var(--skin), 135px -35px 0 -120px var(--skin), 147px -28px 0 -120px var(--skin), 162px -21px 0 -120px var(--skin), 167px -14px 0 -114px var(--skin), 195px -8px 0 -120px var(--skin), 212px -4px 0 -120px var(--skin), 225px 1px 0 -120px var(--skin), 230px 5px 0 -120px var(--skin), 240px 20px 0 -110px var(--skin), 265px 36px 0 -110px var(--skin), 285px 48px 0 -110px var(--skin), 315px 52px 0 -120px var(--skin), 312px 310px 0 -100px var(--skin);
}

#thechild::before, #thechild::after {
	display: block;
	position: absolute;
	content: '';
	width: 20%;
	height: 13.2%;
	background: #fff;
	border-radius: 75% 100%;
	background-image: radial-gradient(circle at 60% 20%, rgba(255,255,255,0.2) 5%, transparent 30%), radial-gradient(circle, black, black 50%, #2d211c 53%, #433a31 72%, white 74%);
}

#thechild::before {
	left: 73px;
	top: 106px;
	box-shadow: 0px 0px 0px 2px var(--skin-shadow), 0 -4px 12px 12px rgba(125,93,86,0.5), 0 -6px 0 18px var(--skin), 0px -16px 0 12px var(--skin-shadow), 66px 79px 0px 2px var(--skin), 66px 76px 0px 0px rgba(54,44,36,0.2), 66px 57px 3px -12px var(--skin), 66px 103px 3px 32px var(--skin), 66px 92px 0 26px var(--skin-highlight), 66px 88.5px 0 25px var(--skin-shadow), -295px -21px 0 -11px var(--skin), -280px -22px 0 -10px var(--skin), -250px -23px 0 -8px var(--skin), -230px -25px 0 -7px var(--skin), -210px -28px 0 -7px var(--skin), -190px -28px 0 -5px var(--skin), -170px -30px 0 -3px var(--skin), -140px -32px var(--skin), -110px -37px var(--skin), -95px -25px var(--skin), -90px -40px var(--skin), 5px 9px 0 18px var(--skin), 11px 15px 0 12px var(--skin-shadow-soft);
}

#thechild::after {
	left: 212px;
	top: 106px;
	box-shadow: 0px 0px 0px 2px var(--skin-shadow), 0 -4px 12px 12px rgba(125,93,86,0.5), 0 -6px 0 18px var(--skin), 0px -16px 0 12px var(--skin-shadow), -2px 9px 0 18px var(--skin), -8px 15px 0 12px var(--skin-shadow-soft);
}

#thechild .clothing,
#thechild .clothing *,
#thechild .clothing div::before,
#thechild .clothing div::after,
#thechild .clothing::before,
#thechild .clothing::after {
  box-shadow: 2px 2px 18px var(--skin-shadow);  
  background: var(--fabric);
}

#thechild .clothing {
  width: 360px;
  height: 520px;
  display: block;
  position: absolute;
  top: 250px;
  background-image: linear-gradient(0.25turn, var(--fabric), var(--fabric) 49.5%, #463d3c, var(--fabric) 50.5%, var(--fabric));
  border-radius: 12px;
}

#thechild .clothing::before {
  display: block;
  content: '';
  border-radius: 25px;
  position: absolute;
  left: -55px;
  top: -20px;
  width: 220px;
  height: 110px;
  transform: rotateZ(10deg);
  z-index: 1;
}

#thechild .clothing::after {
  display: block;
  content: '';
  border-radius: 25px;
  position: absolute;
  top: -35px;
  left: 115px;
  width: 265px;
  height: 105px;
  transform: rotateZ(-15deg);
}

#thechild .clothing div::before {
  display: block;
  content: '';
  width: 85px;
  height: 240px;
  position: absolute;
  top: 55px;
  left: -60px;
  transform: rotateZ(10deg);
  border-radius: 25px;
  background-image: linear-gradient(transparent, transparent 80%, #9f928a 80.5%);
}

#thechild .clothing div::after {
  display: block;
  content: '';
  width: 160px;
  height: 320px;
  position: absolute;
  top: -55px;
  left: 295px;
  transform: rotateZ(-55deg);
  border-radius: 25px;
  background-image: linear-gradient(transparent, transparent 83%, #9f928a 83.5%);
}
              
            
!

JS

              
                
              
            
!
999px

Console