cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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 style="text-align:center; margin-top: 50px">
  
  <div class="starfish" style="display:inline-block; margin: 25px 50px;vertical-align:top;">
    <div class="fish-leg"></div>
    <div class="fish-face">
      <div class="fish-smile">
        <div class="fish-tongue"></div>
      </div>
    </div>     
  </div>

  <div class="octopus" style="display:inline-block; margin: 20px 50px;vertical-align:top;">
    <div class="octo-smile"></div>
    <div class="octo-chin"></div>
    <div class="octo-tentacle"></div>
  </div>

  <div class="crab" style="display:inline-block; margin: 70px 50px;vertical-align:top;">
    <div class="crab-smile"></div>
    <div class="crab-chin"></div>
    <div class="crab-hand">
      <div class="crab-clutch"> </div> 
    </div>
    <div class="crab-leg"> 
    </div>
  </div>

  <div class="sea-horse" style="display:inline-block; margin: 20px 30px 20px 60px;vertical-align:top;">
    <div class="sea-beak"></div>
    <div class=sea-chest></div>
    <div class="sea-neck">
      <div class="sea-tail">
        <div class="sea-curl"></div>
      </div>
    </div>
    <div class="sea-fag-shadow"></div>
    <div class="sea-fag"></div>
  </div>

  <div class="ball-fish" style="display:inline-block; margin: 30px 50px;vertical-align:top;">
    <div class="bf-prick"></div>
    <div class="ball-fish-brows"></div>
    <div class="ball-fish-lips">
      <div class="ball-fish-mouth"></div>
    </div>
    <div class="ball-fish-lower-half"></div>
    <div class="ball-fish-tail"></div>
  </div>
</div>

            
          
!
            
              body {
  background-color: #006A94;
}
.starfish {
  position: relative;
  width: 25px;
  height: 50px;
  background-color: #E80000;
  border-radius: 40px 5px 30px 10px;
  transform: rotate(10deg);
  box-shadow: 0px 0px 3px 1px, 0px 0px 5px 5px #B40001 inset;
}
.starfish:before {
  content: '';
  display: block;
  width: 25px;
  height: 50px;
  background-color: #E80000;
  border-radius: 40px 5px 20px 10px;
  transform: translateX(30px) translateY(23px) rotate(85deg) ;
  box-shadow: 0px 0px 3px 1px black, 0px 0px 5px 5px #B40001 inset;
}
.starfish:after {
  content: '';
  display: block;
  width: 50px;
  height: 25px;
  background-color: #E80000;
  border-radius: 40px 5px 20px 10px;
  transform: translateX(-38px) translateY(-13px) rotate(0deg) ;
  box-shadow: 0px 0px 3px 1px, 0px 0px 5px 5px #B40001 inset;
}

.fish-leg {
  position: absolute;
  width: 25px;
  height: 60px;
  background-color: #E80000;
  border-radius: 40px 5px 20px 10px;
  transform: translateX(10px) translateY(-10px) rotate(135deg) ;
  box-shadow: 0px 0px 3px 1px, 0px 0px 5px 5px #B40001 inset;
}

.fish-leg:before {
  content: '';
  display: block;
  width: 60px;
  height: 25px;
  background-color: #E80000;
  border-radius: 20px 5px 40px 10px;
  transform: translateX(10px) translateY(30px) rotate(-10deg) ;
  box-shadow: 0px 0px 3px 1px, 0px 0px 5px 5px #B40001 inset;
}

.fish-face {
  width: 45px;
  height: 45px;
  background-color: #E80000;
  border-radius: 50%;
  position: absolute;
  bottom: -27px;
  z-index: 5;
  right: -10px;
}

.fish-face:before {
  content: '';
  display: block;
  width: 1px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid;
  background-color: black;
  box-shadow: -1px 1px 0px 0.5px white,
    0px 0px 0px 2px blue,
    0px 0px 0px 4px white,
    0px 0px 4px 4px black,
    15px 0px 0 0px black,
    14px 1px 0px 0.5px white,
    15px 0px 0px 2px blue,
    15px 0px 0px 4px white,
    15px 0px 4px 4px black,
    7px -17px 5px 1px #FBAE18,
    8px -27px 4px 0px #FBAE18,
    10px -35px 4px 0px #FBAE18,
    15px -42px 5px 0px #FBAE18,
    
    21px 26px 5px 1px #FBAE18,
    28px 30px 4px 0px #FBAE18,
    32px 37px 5px 0px #FBAE18,
    32px 45px 6px 0px #FBAE18,
    
    -6px 28px 5px 1px #FBAE18,
    -13px 35px 4px 0px #FBAE18,
    -17px 43px 5px 0px #FBAE18,
    -18px 54px 5px 0px #FBAE18,
    
    30px 3px 5px 1px #FBAE18,
    38px 0px 4px 0px #FBAE18,
    48px 0px 4px 0px #FBAE18,
    57px 3px 5px 0px #FBAE18,
    
    -14px 1px 5px 1px #FBAE18,
    -23px -1px 5px 0px #FBAE18,
    -31px 2px 4px 0px #FBAE18,
    -37px 9px 5px 0px #FBAE18;
  position: absolute;
  left: 12px;
  top: 12px;
}

.fish-smile {
  content: '';
  display: block;
  width: 13px;
  height: 12px;
  border-radius: 0 0 50% 50%;
  background-color: #7F0301;
  position: absolute;
  right: 18px;
  top: 28px;
}

.fish-smile:before {
  content: '';
  height: 0;
  width: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #7F0301;
  position: absolute;
  bottom: 5px;
  right: 10px;
  transform: rotate(-60deg);
}

.fish-smile:after {
  content: '';
  height: 0;
  width: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #7F0301;
  position: absolute;
  bottom: 5px;
  right: -7px;
  transform: rotate(60deg);
}

.fish-tongue {
  width: 10px;
  height: 5px;
  background-color: #FE7878;
  border-radius: 50%;
  position: absolute;
  bottom: 0px;
  left: 1px;
  box-shadow: 0px -2px 0px 1px #D85456;  
}

.octopus {
  width: 110px;
  height: 70px;
  background-color: #C57FFC;
  border-radius: 100px 100px 30px 30px;
  box-shadow: 0px -1px 1px 0px,
    0px 0px 3px 0px #fff inset;
  position: relative;
}

.octopus:before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 7px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  left: 40px;
  box-shadow: -1px -1px 1px 0px white,
    0px -1px 1px 3px #0189C0,
    0 -1px 3px 2px #000,
    0 -2px 0 7px #fff,
    0 -2px 2px 7px #000,
    40px 0px 0 0px #000,
    39px -1px 1px 0px white,
    40px -1px 1px 3px #0189C0,
    40px -1px 3px 2px #000,
    40px -2px 0 7px #fff,
    40px -2px 2px 7px #000;
}

.octopus:after {
  content: '';
  display: block;
  width: 110px;
  height: 70px;
  background-color: #C57FFC;
  border-radius: 0 0 80px 80px;
  box-shadow: 0px 3px 1px -1px #000;
  position: absolute;
  bottom: -28px;
  transform: scaleY(0.4);
}

.octo-tentacle:before {
  content: '';
  display: block;
  width: 10px;
  height: 15px;
  background-color: #C57FFC;
  border-radius: 8px 8px 0 10px;
  transform: rotate(50deg);
  position: absolute;
  top: -11px;
  left: 3px;
  box-shadow: -1px 0px 2px 0px #000,
    30px 9px 1px 1px #C57FFC,
    30px 10px 1px 1px #000,
    50px -4px 1px 1px #C57FFC,
    50px -6px 1px 1px #000,
    75px -17px 1px 1px #C57FFC,
    75px -18px 1px 1px #000,
    102px -25px 1px 1px #C57FFC,
    102px -24px 1px 1px #000;
}

.octo-tentacle {
  width: 8px;
  height: 15px;
  background-color: #C57FFC;
  border-radius: 0 0px 10px 10px;
  transform: rotate(-30deg);
  position: absolute;
  bottom: -20px;
  box-shadow: 0px 1px 1px 0.5px,
    25px 10px 1px 1px #C57FFC,
    25px 11px 1px 1px #000,
    36px 35px 1px 1px #C57FFC,
    36px 34px 1px 1px #000,
    63px 48px 1px 1px #C57FFC,
    63px 48px 1px 1px #000,
    93px 40px 1px 1px #C57FFC,
    93px 39px 1px 1px #000;
}

.octo-tentacle:after {
  content: '';
  display: block;
  width: 10px;
  height: 15px;
  background-color: #C57FFC;
  border-radius: 8px 8px 0 10px;
  transform: rotate(60deg);
  position: absolute;
  top: 11px;
  left: -5px;
  box-shadow: 0px 1px 1px 0px #000,
    20px 0px 1px 1px #C57FFC,
    20px 1px 1px 1px #000,
    45px -12px 1px 1px #C57FFC,
    45px -11px 1px 1px #000,
    73px -28px 1px 1px #C57FFC,
    73px -27px 1px 1px #000,
    85px -47px 1px 1px #C57FFC,
    85px -46px 1px 1px #000;
}

.octo-smile {
  width: 45px;
  height: 20px;
  border-radius: 0 0 50px 50px;
  border-bottom: 3px solid;
  transform: scaleY(0.5);
  position: absolute;
  top: 43px;
  left: 35px;
  z-index: 1;
}

.octo-chin {
  width: 12px;
  height: 7px;
  border-radius: 0 0 7px 7px;
  border-bottom: 1px solid;
  position: absolute;
  bottom: 0px;
  left: 55px;
  transform: scaleY(0.7);
  z-index: 1;
}

.octo-chin:after {
  content: '';
  width: 10px;
  height: 2px;
  display: block;
  border-radius: 0 0 50px 50px;
  border-bottom: 3px solid #AD6CEA;
  transform: rotate(-45deg) scale(6, 4) ;
  position: absolute;
  bottom: 6px;
  right: -30px;
}

.octo-smile:before {
  content: '';
  display: block;
  width: 3px;
  height: 7px;
  border-radius: 3px 0 0 3px;
  border-left: 1px solid;
  position: absolute;
  left: -1px;
  top: 5px; 
  transform: scaleY(2) rotate(30deg);
}

.octo-smile:after {
  content: '';
  display: block;
  width: 3px;
  height: 7px;
  border-radius: 3px 0 0 3px;
  border-right: 1px solid;
  position: absolute;
  left: 45px;
  top: 1px; 
  transform: scaleY(2) rotate(150deg);
}

.crab {
  width: 80px;
  height: 60px;
  border-radius: 50%;
  background-color: #DE0000;
  box-shadow: 0px -7px 1px 0px #BC0000 inset,
    0 1px 3px 1px #000;
  position: relative;
}

.crab:before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 3px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 22px;
  transform: scaleX(0.8);
  box-shadow: 0px 0px 1px 1px #000,
    -2px -2px 1px 1px white,
    0px 0px 1px 4px #046792,
    0 0px 0px 4px #000,
    0 -2px 0 7px #fff,
    0 -2px 2px 7px #000,
    40px 0px 1px 1px #000,
    38px -2px 1px 1px white,
    40px 0px 1px 4px #046792,
    40px 0px 0px 4px #000,
    40px -2px 0 7px #fff,
    40px -2px 2px 7px #000;
}

.crab-smile {
  width: 45px;
  height: 20px;
  border-radius: 0 0 50px 50px;
  border-bottom: 3px solid;
  transform: scaleY(0.5);
  position: absolute;
  top: 27px;
  left: 18px;
  z-index: 1;
}

.crab-chin {
  width: 15px;
  height: 7px;
  border-radius: 0 0 7px 7px;
  border-bottom: 2px solid;
  position: absolute;
  bottom: 5px;
  left: 35px;
  transform: scaleY(0.7);
  z-index: 1;
}

.crab-smile:before {
  content: '';
  display: block;
  width: 3px;
  height: 7px;
  border-radius: 3px 0 0 3px;
  border-left: 1px solid;
  position: absolute;
  left: -1px;
  top: 5px; 
  transform: scaleY(2) rotate(30deg);
}

.crab-smile:after {
  content: '';
  display: block;
  width: 3px;
  height: 7px;
  border-radius: 3px 0 0 3px;
  border-right: 1px solid;
  position: absolute;
  left: 45px;
  top: 1px; 
  transform: scaleY(2) rotate(150deg);
}

.crab-hand {
  width: 11px;
  height: 15px;
  background-color: #DE0000;
  border-radius: 10px 20px 20px 10px;
  box-shadow: 0 0px 1px 0px,
    68px -30px 1px 1px #de0000,
    68px -30px 0px 1px #000;
  position: absolute;
  top: -16px;
  left: 2px;
  transform: rotate(20deg);
}

.crab-hand:before {
  content: '';
  width: 8px;
  height: 20px;
  background-color: #DE0000;
  border-radius: 20px 20px 40px 0px;
  box-shadow: 0 0px 1px 0.5px,
    72px -5px 1px 1px #de0000,
    72px -5px 0px 1px #000;
  position: absolute;
  top: 15px;
  left: 5px;
  transform: rotate(-20deg);
}

.crab-hand:after {
  content: '';
  width: 20px;
  height: 40px;
  background-color: #DE0000;
  border-radius: 40px 5px 20px 40px;
  box-shadow: 0 0px 1px 1px,
  10px 1px 2px -3px #BC0000 inset,
  56px -42px 0px -4px #de0000,
  56px -42px 1px -3px #000;
  position: absolute;
  top: -40px;
  left: -5px;
  transform: rotate(15deg);
}

.crab-clutch {
  width: 12px;
  height: 30px;
  background:  #de0000;
  position: absolute;
  left: 13px;
  top: -23px;
  border-radius: 0px 30px 30px 0px;
  box-shadow: 0 0px 1px 1px,
  41px -66px 2px -2px #BC0000,
  37px -65px 0px 3px #de0000,
  37px -65px 1px 4px #000;
  transform: rotate(35deg);
}

.crab-leg {
  width: 6px;
  height: 20px;
  background:  #de0000;
  position: absolute;
  left: -5px;
  top: 15px;
  border-radius: 20px 20px 0px 0px;
  box-shadow: 0 0px 1px 1px,
    10px -8px 1px 0px #de0000,
    10px -8px 1px 1px,
    20px -19px 1px 0px #de0000,
    20px -19px 1px 1px,
    -38px -91px 1px 1px #de0000,
    -39px -92px 1px 1px,
    -24px -94px 1px 1px #de0000,
    -25px -95px 1px 1px,
    -10px -95px 1px 1px #de0000,
    -10px -96px 1px 1px;
  transform: rotate(110deg);
  z-index: -1;
}

.crab-leg:after {
  content: '';
  width: 6px;
  height: 25px;
  background:  #de0000;
  position: absolute;
  left: 8px;
  top: 13px;
  border-radius: 10px 40px 50px 0px;
  box-shadow: 0 0px 1px 1px,
    11px 5px 1px 0px #de0000,
    11px 5px 1px 1px,
    26px 5px 1px 0px #de0000,
    26px 5px 1px 1px,
    44px -85px 1px 1px #de0000,
    45px -86px 1px 1px,
    54px -78px 1px 1px #de0000,
    55px -79px 1px 1px,
    64px -68px 1px 1px #de0000,
    65px -69px 1px 1px;
  transform: rotate(-50deg);
}

.sea-horse {
  width: 40px;
  height: 40px;
  background-color: #FEB61F;
  border-radius: 50%;
  box-shadow: 0 0 0px 1px #A48169,
    1px 1px 2px 1px #F9E484 inset,
    -4px -4px 1px 0px #FF9C12 inset; 
  position: relative;
}

.sea-horse:before {
  content: '';
  width: 1px;
  height: 4px;
  background-color: #000;
  border-radius: 50%;
  box-shadow: 0px 0px 1px 1px #000,
    -1px -2px 1px 1px white,
    0px 0px 1px 4px #FEB61F,
    0 0px 0px 4px #000,
    0 -2px 0 7px #fff,
    0 -2px 2px 7px #000;
  position: absolute;
  top: 19px;
  left: 18px;
}

.sea-horse:after {
  content: '';
  width: 25px;
  height: 7px;
  position: absolute;
  left: -21px;
  top: 27px;
  border-radius: 0 5px 5px 0;
  box-shadow: -1px 0 0px 1px #A48169;
  background-color: #FEB61F;
  transform: rotate(-8deg); 
}

.sea-beak {
  width: 12px;
  height: 7px;
  position: absolute;
  left: -28px;
  top: 25px;
  background-color: #FEB61F;
  box-shadow: 0px 0px 1px 1px #E19A54;
  border-radius: 50%;
  transform: rotate(25deg);
  z-index: 1;
}

.sea-beak:before {
  content: '';
  width: 12px;
  height: 10px;
  position: absolute;
  left: 3px;
  top: 5px;
  background-color: #FEB61F;
  box-shadow: 
    0px -2px 0px 0px #E19A54 inset,
    60px -1px 0px -2px #6CB4FE,
    60px -1px 0px -2px,
    65px 10px 0px -2px #6CB4FE,
    65px 10px 0px -2px,
    65px 20px 0px -2px #6CB4FE,
    65px 20px 0px -2px,
    60px 30px 0px -2px #6CB4FE,
    60px 30px 0px -2px,
    48px 36px 0px -2px #6CB4FE,
    48px 36px 0px -2px,
    35px 38px 0px -2px #6CB4FE,
    35px 38px 0px -2px,
    27px 47px 0px -2px #6CB4FE,
    27px 47px 0px -2px,
    20px 57px 0px -2px #6CB4FE,
    20px 57px 0px -2px;
  border-radius: 50%;
  transform: rotate(-65deg);
  z-index: 1;
}

.sea-neck {
  width: 8px;
  height: 12px;
  border-right: 15px solid #FF9C12;
  border-top: 4px solid transparent;
  border-bottom: 2px solid transparent;
  position: absolute;
  top: 34px;
  left: 5px;
  transform: rotate(12deg);
}

.sea-neck:before {
  content: '';
  width: 14px;
  height: 50px;
  border-radius: 40px 40px 100px 0;
  background-color: #FEB61F;
  position: absolute;
  top: 7px;
  left: 16px;
  transform: rotate(-22deg); 
}

.sea-neck:after {
  content: '';
  width: 10px;
  height: 20px;
  border-radius: 0 40px 40px 0;
  background-color: transparent;
  position: absolute;
  top: 45px;
  left: 22px;
  z-index: -1;
  box-shadow: 5px -1px 0px 3px #FF9C12;
  transform: rotate(-8deg) scaleY(2);
}

.sea-tail {
  width: 10px; 
  height: 28px;
  background-color: #FEB61F;
  position: absolute;
  top: 50px;
  left: 26px;
  border-radius: 4px 2px 10px 0px;
}

.sea-tail:before {
  content: '';
  width: 45px;
  height: 45px;
  border-radius: 0 0 50% 50%;
  background-color: transparent;
  position: absolute;
  top: -10px;
  left: -40px;
  z-index: -1;
  box-shadow: 4px 6px 1px 2px #FF9C12,
    4px 7px 0px 2px #A48169;
}

.sea-tail:after {
  content: '';
  width: 35px;
  height: 25px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: 10px;
  left: -32px;
  z-index: -1;
  box-shadow: -4px 3px 1px 2px #FEB61F;
}

.sea-curl {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: 16px;
  left: -36px;
  z-index: -1;
  box-shadow: 1px -4px 1px 2px #FEB61F,
    -1px -4px 0 1px #A48169;
}

.sea-curl:after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FEB61F;
  position: absolute;
  top: 2px;
  left: 8px;
}

.sea-chest {
  width: 20px;
  height: 45px;
  position: absolute;
  background-color: #FFF594;
  border-radius: 80px 5px 80px 5px;
  top: 55px;
  left: 3px;
  box-shadow: -1px 0px 0px 0px #A48169;
  z-index: -1;
  transform: scale(1, 2);
}

.sea-chest:before {
  content: '';
  width: 20px;
  height: 0px;
  border-bottom: 1px solid #A48169;
  position: absolute;
  top: 10px;
  left: 1px;
  transform: scale(1, 1);
  box-shadow: 
    -1px 7px 0px 0px #A48169,
    -2px 15px 0px 0px #A48169,
    -2px 23px 0px 0px #A48169,
    -2px 30px 0px 0px #A48169;
}

.sea-fag {
  content: '';
  width: 25px;
  height: 10px;
  border-right: 25px solid #6CB4FF;
  border-bottom: 10px solid transparent;  
  border-top: 10px solid transparent;
  position: absolute;
  top: 70px;
  z-index: -1;
  transform: rotate(0deg);
}


.sea-fag:before {
  content: '';
  width: 20px;
  height: 8px;
  border-radius: 50%;
  background: #6CB4FF;
  position: absolute;
  bottom: 12px;
  left: 36px;
  z-index: -2;
  transform: rotate(-20deg);
  box-shadow: 0px 8px 0 0px #6CB4FF,
    -5px 3px 1px 0 #4EA0EA inset;
  
}

.sea-fag:after {
  content: '';
  width: 20px;
  height: 8px;
  border-radius: 50%;
  background: #6CB4FF;
  position: absolute;
  bottom: -2px;
  left: 38px;
  z-index: -2;
  transform: rotate(20deg);
  box-shadow:
    0px 10px 0 0px #6CB4FF,
    -5px -5px 1px 0 #4EA0EA inset;
}

.sea-fag-shadow {
  width: 12px;
  height: 12px;
  border-radius: 2px 10px 0 0;
  border-top: 1px solid #000;  
  position: absolute;
  bottom: -60px;
  right: -6px;
}

.sea-fag-shadow:before {
  content: '';
  background: transparent;
  width: 12px;
  height: 12px;
  border-radius: 0 0 2px 10px;
  border-bottom: 1px solid #000;  
  position: absolute;
  top: -17px;
  right: 3px;
  transform: rotate(-25deg);
}

.ball-fish {
  width: 110px;
  height: 95px;
  background: #B46427;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 1px 0.8px,
    1px -10px 0 -2px #e5b680 inset,
    2px -23px 0 -8px #F6CF98 inset,
    0px 2px 0 0 #D2B7A5 inset;
}

.ball-fish:before {
  content: '';
  width: 55px;
  height: 30px;
  border-radius: 20px 0px 60px 0px;
  background-color: #F6CF98;
  position: absolute;
  bottom: 8px;
  left: 28px;
  transform: rotate(28deg);
}

.ball-fish-brows {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 15px 200px 0 0;
  position: absolute;
  top: 18px;
  left: 38px;
  border-top: 2px solid;
  z-index: 1
}

.ball-fish-brows:before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 200px 24px 0 0;
  position: absolute;
  top: 0px;
  left: -35px;
  border-top: 2px solid;
}

.ball-fish:after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 3px;
  background-color: transparent;
  border-radius: 50%;
  position: absolute;
  top: 38px;
  left: 8px;
  transform: scaleX(0.7);
  box-shadow: 
    4px 0px 1px 1px #000,
    3px -2px 1px 1px white,
    4px 0px 1px 4px #046792,
    4px 0px 0px 4px #000,
    1px -2px 0 9px #fff, 
    45px 1px 1px 1.5px #000,
    43px -2px 1px 1px white,
    44px 0px 1px 5px #046792,
    44px 0px 0px 5px #000,
    40px -2px 0 10px #fff,
    40px -2px 2px 10px #000,
  6px -6px 1px 18px #B46427,
    3px -7px 1px 16px #000;
}

.ball-fish-lower-half {
  width: 25px;
  height: 60px;
  background: #F6CF98;
  border-radius: 50%;
  z-index: 1;
  position: absolute;
  transform: rotate(-50deg);
  top: 40px;
  left: 8px;
  box-shadow: 8px 0px 0 0px #e5b680 inset,
     5px 3px 0 -3px #000 inset;
}

.ball-fish-lower-half:before {
  content: '';
  width: 20px;
  height: 10px;
  background: #F6CF98;  
  position: absolute;
  transform: rotate(35deg);
  top: 24px;
  left: 16px;
}

.ball-fish-lower-half:after {
  content: '';
  width: 38px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  position: absolute;
  top: 68px;
  left: 40px;
  transform: rotate(45deg);
  box-shadow: 0px -8px 0 0 #F6CF98 inset;
}

.ball-fish-tail {
  width: 18px;
  height: 10px;
  border-radius: 5px 20px 20px 5px;
  background: #FCBE11;
  position: relative;
  top: 40px;
  right: -70px;
  box-shadow: 
    40px 6px 0 0px #F99108,
    -4px 2px 0 0px #F99108 inset,
    39px 15px 0 0px #F99108;
}

.ball-fish-tail:after {
  content: '';
  width: 18px;
  height: 10px;
  border-radius: 10px 20px 20px 10px;
  transform: rotate(45deg);  
  background: #FCBE11;
  position: absolute;
  top: 5px;
  right: 1px;
  box-shadow: -5px -2px 0 0px #F99108 inset, 36px -17px 0 0px #F99108; 
}

.ball-fish-tail:before {
  content: '';
  width: 18px;
  height: 10px;
  transform: rotate(-40deg);
  border-radius: 10px 20px 20px 0px;
  background: #FCBE11;
  position: absolute;
  top: -5px;
  right: 1px;
  box-shadow: 28px 30px 0 -1px #FCBE11,
    27px 32px 0 -1px #f99108,
    -5px 3px 0 0 #f99108 inset;
}

.ball-fish-lips {
  width: 7px; 
  height: 13px;
  background: #FCBE11;
  border-radius: 26px 5px 5px 26px;
  transform: rotate(10deg);
  box-shadow: -1px -1px 0 0 #DD821E,
    1px 1px 0 0 #F9D652 inset,
    -1px -3px 0 -1px #f99108 inset; 
  position: absolute;
  top: 55px;
  left: 12px;
  z-index: 2;
}

.ball-fish-lips:before {
  content: '';
  width: 18px;
  height: 10px;
  background: #FCBE11;
  border-radius: 0 0 16px 16px;
  position: absolute;
  left: 3px;
  top: 2px;
  transform: rotate(25deg);
  box-shadow: -1px 0px 0 1px #f99108 inset,
    -3px -2px 0 1px #f99108 inset;
  
}

.ball-fish-lips:after {
  content: '';
  width: 20px;
  height: 10px;
  background: #FCBE11;
  border-radius: 0 0 16px 16px;
  position: absolute;
  left: 2px;
  top: 10px;
  transform: rotate(-15deg);
  box-shadow: 0px -1px 0 1px #f99108 inset,
    -1px -1px 0 2px #f99108 inset;
}

.ball-fish-mouth {
  content: '';
  width: 5px;
  height: 4px;
  border-radius: 10px 10px 10px 2px;
  background: #7F0A02;
  position: absolute;
  top: 8px;
  left: 5px;
  z-index: 3;
  transform: rotate(110deg);
}

.ball-fish-mouth:before {
  content: '';
  width: 10px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  transform: rotate(50deg);
  position: absolute;
  top: -35px;
  left: -54px;
  box-shadow: 
    2px -2px 0 0 #7F0A02,
    2px -5px 0px 0 #7F0A02,
    -38px -14px 1px 0 #7F0A02,
    -37px -18px 1px 0 #7F0A02,
    -30px 10px 0px 0px #924C18,
    -22px 24px 1px 0px #924C18,
    8px 26px 1px 0px #924C18,
    20px -3px 1px 0px #924C18,
    15px 13px 1px 0px #924C18,
    -10px 16px 1px 0px #924C18,
    -22px 0px 1px 0px #924C18,
    -25px -12px 1px 0px #924C18,
    -15px -22px 1px 0px #924C18, 
    -18px -38px 1px 0px #924C18,
    -8px -48px 1px 0px #924C18,
    8px -53px 1px 0px #924C18,
    28px -52px 1px 0px #924C18,
    26px -23px 1px 0px #924C18,
    36px -38px 1px 0px #924C18,
    18px -38px 1px 0px #924C18,
    2px -34px 1px 0 #903B02;
  
}

.ball-fish-mouth:after {
  content: '';
  width: 10px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  transform: rotate(75deg);
  position: absolute;
  top: -38px;
  left: -47px;
  box-shadow: 
    1px -1px 0px 0 #7F0A02,
    -41px 2px 1px 0 #7F0A02,
     -41px -3px 1px 0 #7F0A02,
    -20px 31px 1px 0 #903B02,
    -8px 40px 1px 0 #903B02,
    18px 30px 1px 0 #903B02,
    20px -2px 1px 0 #903B02,
    20px 15px 1px 0 #903B02,
    -2px 28px 1px 0 #903B02,
    -18px 18px 1px 0 #903B02,
    -26px 8px 1px 0 #903B02,
    -20px -5px 1px 0 #903B02,
    -32px -17px 1px 0 #903B02,
    -26px -30px 1px 0 #903B02,
    -12px -42px 1px 0 #903B02,
    4px -51px 1px 0 #903B02,
    16px -22px 1px 0 #903B02,
    2px -32px 1px 0 #903B02,
    18px -40px 1px 0 #903B02,
    -12px -22px 1px 0 #903B02;
}

.bf-prick:before {
  content: '';
  width: 10px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  transform: rotate(-20deg);
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: -15px -18px 1px 0 #903B02,
    0px -1px 1px 0 #903B02,
    5px 21px 1px 0 #903B02,
    -15px -5px 1px 0 #903B02; 
}

.bf-prick {
  width: 10px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  transform: rotate(-40deg);
  position: absolute;
  top: -2px;
  left: 47px;
  box-shadow: -20px -12px 1px 0 #903B02,
    0px -1px 1px 0 #903B02,
    15px 18px 1px 0 #903B02,
    -15px 1px 1px 0 #903B02;
}


            
          
!
999px
Loading ..................

Console