CodePen

HTML

            
              <div class="pokeball">
    <div class="details"></div>
</div>
            
          
!

CSS

            
              html{height: 100%;}

body{
  background:-webkit-radial-gradient( center center,circle cover,white 50%, #ccc);
  
  background:-moz-radial-gradient( center center,circle cover,white 50%, #ccc);
    
 background:radial-gradient( center center,circle cover,white 50%, #ccc)
}

:before, :after{
  position: absolute;
	content: "";
}

.pokeball {
	position: absolute;
	width: 400px;
	height: 400px;	
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
	background: -webkit-radial-gradient(right top, cover circle, rgba(230,230,230,.5)0% , #CA0601 50%) left top no-repeat, -webkit-linear-gradient(90deg, #CCCDD5 40% , #CA0601 40% );
	background: -moz-radial-gradient(right top, cover circle, rgba(230,230,230,.5)0% , #CA0601 50%) left top no-repeat, -moz-linear-gradient(90deg, #CCCDD5 40% , #CA0601 40% );
	background: radial-gradient(right top, cover circle, rgba(230,230,230,.5)0% , #CA0601 50%) left top no-repeat, linear-gradient(90deg, #CCCDD5 40% , #CA0601 40% );
  
	background-size: 100% 240px, 100%;
	border-radius: 50%;
	box-shadow: 1px 2px 10px black;
}

.pokeball:before {
	width: 80px;
	height: 80px;
	background: #BDBEC5;
	border-radius: 50%;
	top: 220px;
	left: 118px;
	box-shadow: inset -4px 4px 5px black, 0 0 1px 0 black;
	z-index: 1;
}

.pokeball:after {
	width: 105px;
	height: 105px;
	background: #BDBEC5;
	border-radius: 50%;
	top: 205px;
	left: 110px;
	box-shadow: inset -5px 5px 5px black, 1px 1px 0 14px black;
}

.details {
	position: absolute;
	left: 5px;
	bottom: 115px;
	width: 380px;
	height: 45px;
	background: black;
	box-shadow: -3px -2px 0 black, -2px 2px 0 black,3px -2px 0 black;
	border-bottom-left-radius: 150px 28px;
	border-bottom-right-radius: 150px 30px;

	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	transform: rotate(5deg);
}

.details:before {
	left: -4px;
	bottom: 20px;
	width: 390px;
	height: 45px;
	background: #CA0601;
	box-shadow: -2px -1px 0 #CA0601;
	border-bottom-left-radius: 150px 25px;
	border-bottom-right-radius: 150px 35px;
}

.details:after {
	left: -11px;
	bottom: -115px;
	width: 400px;
	height: 400px;
	background: transparent;
	box-shadow: 1px 0 0 rgb(232,179,179), inset 2px 0 0 rgba(232,179,179,.8), inset -13px 0 10px rgb(240,230,230);
	border-radius: 50%;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              //https://developer.mozilla.org/pt-PT/demos/detail/pokeball-css
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................