Home › Templates › Low Sun

Low Sun

Burnt orange in one corner, peach across the middle, teal at the far edge, for a landing section that wants warm and cool in the same frame.

Customize this gradient

Colors
Style: textured · grainy
Good for: wallpaper · website background

CSS

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

.gradient-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to top right, #2e282a 0%, #cd5334 25%, #edb88b 50%, #fad8d6 75%, #17bebb 100%),
    #0f172a;
  opacity: 1;
  mix-blend-mode: normal;
}

.gradient-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.12;
  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=%223.5999999999999996%22 numOctaves=%222%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;
  background-image: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.45) 100%);
}

/* @designState: {"texture":"noise-fine","textureConfig":{"noise":{"opacity":0.12,"baseFrequency":1.2,"numOctaves":5}},"extraTextures":[{"id":"vignette","vignette":{"strength":0.4,"color":"#000000"}}],"gradientSmoothness":90} */