CSS Shapes

• Border radius

  This property is quite simple but very useful. Unfortunately, it cannot draw a squircle.

• height: 100px;
  aspect-ratio: 1/1;
  border-radius: 40% 60% 30% 70% / 35% 50% 50% 65%;

• height: 100px;
  aspect-ratio: 1/1;
  border-radius: 50%;

• height: 100px;
  aspect-ratio: 2/1;
  border-radius: 50%;

• height: 100px;
  aspect-ratio: 2/1;
  border-radius: 50px 50px 0 0;

• height: 100px;
  aspect-ratio: 3/1;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;

• height: 100px;
  aspect-ratio: 1/1;
  border-radius: 0 100%;

• height: 100px;
  aspect-ratio: 1/1;
  border-radius: 0 100% 0 0;

• Box-shadow and drop-shadow

  These properties can help you copy the shape of your block. Box-shadow copies a shape even if the block doesn't have a background. Drop-shadow copies only the filled pixels, including border-radius and gradient with alpha.

  Pixelate image generator

• box-shadow: inset 0 0 0 5px color1,
      inset 0 0 0 15px color2,
      inset 0 0 0 30px color3;

• box-shadow: inset 5px 5px 0 5px color1,
      inset 10px 10px 0 15px color2,
      inset 15px 15px 0 30px color3;

• box-shadow: inset 50px -40px 0 -20px white;

• border: 2px solid white;
  box-shadow: -100px 0 0 10px white,
      100px 0 0 -10px white;

• border: 2px solid white;
  filter: drop-shadow(102px 0 0 white)
  drop-shadow(-102px 0 0 white);

• width: 10px;
  height: 10px;
  box-shadow: 20px 0 #F63911, 30px 0 #F63911, 50px 0 #F63911, 50px 0 #F63911, 60px 0 #F63911, 10px 10px #F63911, 20px 10px #F63911, 
      40px 0px #F63911, 30px 10px #F63911, 40px 10px #F63911, 50px 10px #F63911, 60px 10px #F63911, 70px 10px #F63911, 
      90px 10px #F63911, 10px 20px #8C5610, 20px 20px #8C5610, 30px 20px #8C5610, 10px 30px #8C5610, 0px 30px #8C5610, 
      0px 40px #8C5610, 20px 40px #8C5610, 30px 40px #8C5610, 0px 50px #8C5610, 10px 50px #8C5610, 10px 30px #FFB56B, 
      10px 40px #FFB56B, 40px 40px #FFB56B, 40px 30px #FFB56B, 30px 30px #FFB56B, 40px 20px #FFB56B, 50px 20px #FFB56B, 
      50px 30px #FFB56B, 50px 40px #FFB56B, 50px 50px #FFB56B, 40px 50px #FFB56B, 30px 50px #FFB56B, 20px 50px #FFB56B, 
      20px 60px #FFB56B, 30px 60px #FFB56B, 40px 60px #FFB56B, 50px 60px #FFB56B, 60px 60px #FFB56B, 70px 60px #FFB56B, 
      80px 60px #FFB56B, 80px 40px #FFB56B, 60px 40px #FFB56B, 90px 40px #FFB56B, 100px 40px #FFB56B, 90px 30px #FFB56B, 
      80px 30px #FFB56B, 70px 30px #FFB56B, 70px 20px #FFB56B, 60px 20px #000000, 60px 30px #000000, 70px 40px #000000, 
      60px 50px #000000, 70px 50px #000000, 80px 50px #000000, 90px 50px #000000, 80px 10px #F63911, 20px 30px #FFB56B;

• Masking

  Masks create a clipping region that defines which part of an element should be visible. Parts within the region are shown, while those outside are hidden.

  Clip-path generator

  Clip-path stars generator

  Clip-path wawes generator

  Clip-path polygons generator

• mask-image: linear-gradient(45deg, black 50%, transparent 50%);

• mask-image: linear-gradient(45deg, black 50%, transparent 50%);
  mask-size: 10px 10px;

• mask-image: radial-gradient(closest-side, white 100%, transparent 0),
      linear-gradient(45deg, black 50%, transparent 50%);

• clip-path: polygon(50px 0px, 70px 25px, 100px 38px, 
      83px 66px, 81px 100px, 50px 92px, 
      19px 100px, 17px 67px, 0px 38px, 
      30px 25px);

• Gradients

  The most powerful property. You can create a world with just a gradient and one block!

  Gradient patterns

• background-image: linear-gradient(0deg, white 2px, transparent 2px 4px);
  background-size: 100% 4px;

• background-image: radial-gradient(closest-side, white 100%, transparent 0);
  background-size: 10px 10px;

• background-image: conic-gradient(white 45deg, transparent 45deg 135deg,
            white 135deg 225deg, transparent 225deg 315deg, white 315deg);
  background-size: 10px 10px;

• background-image: radial-gradient(closest-side, white 100%, transparent 0),
            radial-gradient(closest-side, white 100%, transparent 0),
            linear-gradient(white, white);
  background-position: 10px 0px, 60px 0px, 0px 80px;
  background-size: 30px 50px, 30px 50px, 100% 20px;
  background-repeat: no-repeat;

• Transforms

• height: 100px;
  aspect-ratio: 1/1;
  rotate: 45deg;

• height: 100px;
  aspect-ratio: 1/1;
  transform: skew(10deg);

• height: 100px;
  aspect-ratio: 1/1;
  transform: skew(10deg, 10deg);

• Border

  This approach is useful for blocks with no content and plain background.

• border-style: solid;
  border-color: transparent transparent white;
  border-width: 0 50px 100px;

• border-style: solid;
  border-color: transparent transparent white;
  border-width: 0 0 100px 100px;

• width: 100px;
  border-style: solid;
  border-color: transparent transparent white transparent;
  border-width: 0 20px 100px 20px;