SOURCE

/*

original design:
https://dribbble.com/shots/12254465-MacOS-Big-Sur-Mac-App-Icon-in-Figma-Community

*/

<div class="app app--mail">
  <div class="mail-envelope">
    <address>Apple Park, California 95014</address>
    <div class="mail-envelope__top"></div>
    <div class="mail-envelope__bottom"></div>
  </div>
</div>

.app {
  --size: 550px; // try changing this

  width: var(--size);
  height: var(--size);
  border-radius: calc(var(--size) * 0.22);
  position: relative;

  &--mail {
    background-image: linear-gradient(to bottom, #3487f4, #2ad0fb);
    box-shadow: 0 60px 74px -10px rgba(42, 208, 251, 0.18);
  }
}

.mail-envelope {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--size) * 0.7);
  height: calc(var(--size) * 0.45);
  background-color: #fff;
  border-radius: calc(var(--size) * 0.04);
  box-shadow: 0 7px 26px -5px rgba(0, 0, 0, 0.3);
  overflow: hidden;

  &::after {
    content: "";
    width: 100%;
    height: calc(var(--size) * 0.1);
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(
      to bottom,
      transparent 35%,
      rgba(0, 0, 0, 0.25) 100%
    );
    z-index: 1;
  }

  &__top,
  &__bottom {
    position: absolute;
    left: 50%;
    width: calc(var(--size) * 0.5);
    height: calc(var(--size) * 0.5);
    border-bottom-right-radius: calc(var(--size) * 0.12);

    &::before {
      content: "";
      position: absolute;
      width: calc(var(--size) * 0.48);
      height: calc(var(--size) * 0.48);
      background-color: #fff;
      border-bottom-right-radius: calc(var(--size) * 0.105);
    }
  }

  &__top {
    top: 0;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    background-image: linear-gradient(135deg, #f4f4f4, #d3d3d3);
    box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.3),
      inset 0 0 9px 0px rgba(51, 51, 51, 0.3);
  }

  &__bottom {
    bottom: 0;
    transform: translateX(-50%) translateY(50%) rotate(225deg);
    z-index: -1;
    background-image: linear-gradient(135deg, #e9e4e4, #d5d1d1);
    box-shadow: inset 0 0 9px 4px rgba(51, 51, 51, 0.3);
  }

  address {
    position: absolute;
    z-index: 1;
    font-style: normal;
    left: 0;
    top: 9%;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    font-family: "Helvetica";
    font-weight: 700;
    font-size: 0.7rem;
    user-select: none;
    letter-spacing: 0.74px;
    background-image: linear-gradient(
      to bottom,
      #d7d8da,
      rgba(215, 216, 218, 0.25)
    );
    -webkit-background-clip: text;
    color: transparent;
  }
}

body {
  background-image: linear-gradient(to bottom, #0d1045, #231d6a);
  height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
}