Home › Explore › Crimson Theme

Crimson Theme

Crimson Theme is a shared gradient by @Surya Anand on ProGradients.

0 remixes · by @Surya Anand

CSS

/* Add these child elements inside .gradient-container:
  <div class="gx-texture"></div>
*/

.gradient-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle 1500px at 100% 100%, #6b0203ff 0%, transparent 100%),
    radial-gradient(circle at 99% 100%, #000000 0%, #000000 50%, #000000 100%),
    #000000;
  opacity: 1;
  mix-blend-mode: normal;
}

.gradient-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.2;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.4%22 numOctaves=%223%22 stitchTiles=%22stitch%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/></svg>');
}

.gradient-container > .gx-texture:nth-of-type(1) {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.12;
  background-image: repeating-linear-gradient(45deg, #ffffff 0px, #ffffff 1px, transparent 1px, transparent 20px), repeating-linear-gradient(-45deg, #ffffff 0px, #ffffff 1px, transparent 1px, transparent 20px);
}