.radial-mask {
      background: repeating-conic-gradient(
        from 45deg at 10% 20%,
        rgba(113, 244, 90, 0.326) 0deg 18deg,
        rgba(29, 71, 219, 0.393) 18deg 28deg,
        rgba(193, 10, 181, 0.335) 28deg 47deg
      );

      mask-image:
        radial-gradient(
          circle at 15% 15%, 
          black 10%, 
          transparent 80%
        ),
        radial-gradient(
          ellipse at top, 
          black 10%, 
          transparent 80%
        );
        mask-composite: intersect;
    }
            

     .linear-mask {
        background: repeating-conic-gradient(
          from 45deg at 10% 50%,
          rgba(244, 90, 90, 0.826) 0deg 18deg,
          rgba(242, 209, 126, 0.893) 18deg 28deg,
          rgba(244, 153, 89, 0.735) 28deg 47deg
        );

        mask-image:
          linear-gradient(45deg, black 10%, transparent 99%),
          linear-gradient(black 10%, transparent 99%);

        mask-composite: intersect;

      }
            

  .repeating-conic-gradient {
      background: repeating-conic-gradient(
        from 15deg at 50% 50%,
        rgba(243, 142, 142, 0.849),
        rgba(237, 204, 142, 0.813),
        rgba(255, 255, 0, 0.824),
        rgba(124, 227, 124, 0.815),
        rgba(120, 120, 230, 0.824) 25deg
      );
    }
            

  .color-wheel {
      background: conic-gradient(
        hsl(360, 100%, 50%),
        hsl(315 100% 50%),
        hsl(270 100% 50%),
        hsl(225 100% 50%),
        hsl(180 100% 50%),
        hsl(135 100% 50%),
        hsl(90 100% 50%),
        hsl(45 100% 50%),
        hsl(0 100% 50%)
      );
    }
            

  .conic-gradient {
      background: conic-gradient(
        hsl(360, 100%, 50%),
        hsl(315 100% 50%),
        hsl(270 100% 50%),
        hsl(225 100% 50%),
        hsl(180 100% 50%),
        hsl(135 100% 50%),
        hsl(90 100% 50%),
        hsl(45 100% 50%),
        hsl(0 100% 50%)
      );
    }
            

  .two-radial-gradients {
      background:
        radial-gradient(ellipse 50% 80% at bottom left, 
          rgba(255, 0, 255, 0.5), 
          transparent
          ),
        radial-gradient(circle at 70% 30%, 
          rgba(255, 100, 100, 0.5), 
          transparent
          );
    }
            

  .animated-bg {
      background: linear-gradient(90deg, 
        #ff0000, #ff7f00, 
        #ffff00, #00ff00, 
        #0000ff, #4b0082, 
        #9400d3
        );
      background-size: 1000% 100%;
      animation: move 10s ease infinite;
    }

    @keyframes move {
      0% {
        background-position: 0% 0%;
      }
      100% {
        background-position: 1000% 0%;
      }
    }
            

  .background-paper-overlay {
      background:
        linear-gradient(180deg, #e6e5f3dd, 
        rgba(212, 136, 136, 0.623)),
        url('/images/white-paper-texture.jpg');
      background-blend-mode: difference;
      background-size: 100% auto;
    }
            

  .background-grain-overlay {
      background:
        linear-gradient(to right, rgba(234, 75, 64, 0.2), 
        rgba(154, 6, 199, 0.3)),
        url('/images/noise.jpg');
      background-blend-mode: overlay;
      background-size: 120% auto;
    }
            

  .repeating-linear-gradient {
      background: repeating-linear-gradient(-45deg, #eee, #cfcfcf 10px);
    }
            

  .hard-stop-gradient {
      background: linear-gradient(
        35deg,
        #faeb4b 0%,
        #ea4e1e 25%,
        #9d0535 25%,
        #ffa3c0 50%,
        #0645ab 50%,
        #aac7f5 75%,
        #05817a 75%,
        #86d4d0 100%
      );
    }
            

   .radial-gradient {
      background: radial-gradient(
        farthest-corner at 40px 40px,
        rgb(244, 169, 169) 0,
        rgb(219, 88, 221) 55%,
        rgb(174, 18, 138) 98%
      );
    }
            

  .one-linear-two-radial-gradients {
      background:
        linear-gradient(0.15turn, #8f008d, 90%, blue),
        radial-gradient(ellipse 80% 98% at 20% 20%, #505fe9 5%, transparent),
        radial-gradient(circle at 80% 10%, #fed6e3 20%, transparent);
    }
            

  .three-linear-gradients {
      background:
        linear-gradient(90deg, rgba(0, 255, 242, 0.7) 10%, transparent 50%),
        linear-gradient(45deg, rgba(255, 0, 81, 0.7) 40%, transparent 100%),
        linear-gradient(180deg, #003c95 0%, #8f008d 70%);
    }
            

  .two-linear-gradients {
      background:
        linear-gradient(120deg, 
          #d8f8f6 0%, 
          #60eae3 20%, 
          transparent 100%
          ),
        linear-gradient(-120deg, 
          #1536c9 70%, 
          #031d47 100%
          );
    }
            

  .simple-gradient {
      background: linear-gradient(45deg, 
          #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, 
          #4b0082, #9400d3
          );
    }