Comments (0)

CSS

width: 500px;
height: 500px;
background:
  radial-gradient(ellipse at 50% 100%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 51%) 0px 355px / 500px 120px no-repeat no-repeat, /* Circular bottom mask */
  linear-gradient(0deg, rgba(0,0,0,1) 19.5%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(0,0,0,1) 80.5%) 0px 0px / 500px 500px no-repeat no-repeat, /* Top/bottom mask */
  linear-gradient(-110deg, rgba(0,0,0,0) 42%, rgba(0,0,0,0.4) 45.5%, rgba(229,9,19,1) 46%, rgba(229,9,19,1) 54%, rgba(0,0,0,0.4) 54.5%, rgba(0,0,0,0) 58%) 0px 0px / 500px 500px no-repeat no-repeat, /* Diagonal */
  linear-gradient(90deg, rgba(0,0,0,1) 32.5%, rgba(255,255,255,0) 33%, rgba(0,0,0,0) 43.5%, rgba(0,0,0,1) 44%, rgba(0,0,0,1) 56%, rgba(0,0,0,0) 56.5%, rgba(255,255,255,0) 67%, rgba(0,0,0,1) 67.5%) 0px 0px / 500px 500px no-repeat no-repeat, /* Mask */
  linear-gradient(rgba(169,0,8,1), rgba(169,0,8,1)) 0px 0px / 500px 500px no-repeat no-repeat; /* Background */