Home › Templates › Wave Caustics

Wave Caustics

A black field with a pale gray sweep of light through the middle, for a dark thumbnail.

Colors
Style: textured · animated · futuristic
Good for: product launch · hero section · wallpaper

CSS

.gradient-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: radial-gradient(ellipse 717px 430px at 100% 50%, #ffffffff 0%, transparent 100%),
    radial-gradient(ellipse 717px 430px at 0% 50%, #ffffffff 0%, transparent 100%),
    radial-gradient(ellipse 718px 431px at 0% 50%, #ffffffff 0%, transparent 100%),
    radial-gradient(ellipse 715px 429px at 100% 50%, #ffffffff 0%, transparent 100%),
    radial-gradient(circle 1101px at 0% 0%, #000000cc 0%, transparent 100%),
    radial-gradient(circle 1101px at 100% 0%, #000000cc 0%, transparent 100%),
    radial-gradient(circle 1101px at 0% 0%, #000000ff 0%, transparent 100%),
    radial-gradient(circle 1101px at 100% 0%, #000000ff 0%, transparent 100%),
    radial-gradient(circle 1101px at 0% 100%, #000000cc 0%, transparent 100%),
    radial-gradient(circle 1101px at 100% 100%, #000000cc 0%, transparent 100%),
    radial-gradient(circle 1101px at 0% 100%, #000000ff 0%, transparent 100%),
    radial-gradient(circle 1101px at 100% 100%, #000000ff 0%, transparent 100%),
    linear-gradient(to right, #e5dcdc 0%, #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.19;
  background-image: repeating-linear-gradient(45deg, #ffffff 0px, #ffffff 1px, transparent 1px, transparent 17px), repeating-linear-gradient(-45deg, #ffffff 0px, #ffffff 1px, transparent 1px, transparent 17px);
}