CodePen Embed - Dither / Dissolve CSS Gradients

<div class="container">
  <h1>Dithered CSS Gradients</h1>
  <p>Solid to solid color | Grainy blend only | Reduced banding | Pure CSS Gradients<br><span>Click/tap & hold on items for more colors</span></p>
  <div class="item item--sphere item--color1"></div>
  <div class="item item--sphere item--color2"></div>
  <div class="item item--sphere item--color3"></div>
  <div class="item item--sphere item--color4"></div>
  <div class="item item--pudding item--color5"></div>
  <div class="item item--droplet item--color6"></div>
  <div class="item item--vase item--color7"></div>
  <div class="item item--egg item--color8"></div>
  <div class="item item--cell"></div>
</div>

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);

$size: 130px;
$scale: 1.05;
$border-radius: $size / 2;
$grad-position: 100% 0;
$grad-start: 25%;
$grad-stop: 65%;
$duration: 3.5s;
$noise: url('data:image/png;base64,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');

@mixin dithered-gradient($position, $start, $stop, $color) {
  background: radial-gradient(circle at $position, transparent $start, $color $stop);
  mask: $noise, radial-gradient(circle at $position, transparent $start, #000 ($stop + 10%));
}

@mixin radial-gradient-item($position, $start, $stop, $color) {
  background: repeat-x $position / 50% 100% radial-gradient(circle at 50% 0, transparent $start, $color $stop);
}

@mixin item-unicolor($color) {
  color: $color;
  &::before { @include radial-gradient-item($grad-position, $grad-start, $grad-stop, $color); }
}

@mixin item-bicolor($color1, $color2) {
  background-color: $color2;
  @include item-unicolor($color1);
}

@mixin item-tricolor($color1, $color2, $color3) {
  color: $color3;
  background-color: $color1;
    &::before { @include radial-gradient-item($grad-position, 15%, 45%, $color2); }
    &::after { @include radial-gradient-item($grad-position, 50%, 75%, $color3); }
}

$light: #ffecd2;
$dark: #222;
$color1: #7f5fff;
$color2: #fa709a;
$color3: #ff9673;
$color4: #fec440;
$color5: #72f9c1;
$color6: #5193ff;
$color7: #fd2472;
$color8: #5e21d6;
$color9: #e7627d;
$color10: #3d1635;

html {
  height: 100%;
  font-family: 'Roboto Condensed', sans-serif;
  color: $dark;
}

body {
  margin: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  background-color: #effeff;

  &::before, &::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
  }
  
  &::before {
    @include dithered-gradient(50%, 30%, 60%, #6cc8ff)
  }
  
  &::after {
    mask-image: $noise, linear-gradient(45deg, #000 0%, transparent 25%, transparent 75%, #000 100%);
    background: linear-gradient(45deg, #6d6dff 10%, transparent 25%, transparent 75%, #fbffbe 90%);
  }
}

h1 {
  margin: 0 0 10px 0;
  text-transform: uppercase;
}

p {
  margin: 0;
}

span {
  line-height: 1.8em;
  color: $color2;
}

.container {
  box-sizing: border-box;
  max-width: 1024px;
  padding: 20px;
  text-align: center;
}

.item {
  position: relative;
  display: inline-block;
  margin: 20px 35px;
  width: $size; height: $size;
  background-color: #ffecd2;
  box-shadow: -5px 18px 25px -15px;
  overflow: hidden;
  transition: all 0.2s ease-out;
  cursor: pointer;
  image-rendering: pixelated;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;

  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 0; left: 0;
    height: 100%; width: 400%;
    mask: $noise, radial-gradient(circle at 50% 0, transparent 5%, #000 ($grad-stop + 15%)) 0 0 / 50% 100%;
  }
  
  &:hover {
    transform: scale($scale);

    &.item::before, &.item::after {
      animation: spin-round $duration linear infinite;
    }
  }
  
  &:active {
      animation: hue-rotate 7s infinite;
    }

  &--sphere {
    border-radius: 50%;
  }
  
  &--egg {
   width: $size * 0.77;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

  &--pudding {
    width: $size; height: $size;
    border-radius: 50% 50% 10% 10%;
    
    &::after {
      content: "";
      position: absolute;
      top: 0;
      display: block;
      top: 0; left: 0;
      height: 100%; width: 400%;
      mask: $noise, radial-gradient(circle at 50% 0, transparent 55%, #000 85%) 0 0 / 50% 100%;
    }
  }

  &--droplet {
    width: $size * 0.77; height: $size * 0.77;
    border-radius: 5% 100% 50% 65% / 5% 65% 50% 100%;
    transform: rotate(45deg);
    box-shadow: 5px 18px 25px -15px;
  
    &:hover {
      transform: rotate(45deg) scale($scale);
    }
  }

  &--vase {
    position: relative;
    width: floor($size * 0.62); height: $size;
    border-radius: 40% 40% 70% 70% / 100%;
    
    &::after {
      content: "";
      position: absolute;
      top: 0;
      display: block;
      top: 0; left: 0;
      height: 100%; width: 400%;
      mask: $noise, radial-gradient(circle at 50% 0, transparent 55%, #000 90%) 0 0 / 50% 100%;
    }
  }
  
  &--cell {
    width: $size; height: $size;
    border-radius: 50%;
    color: #ff4d5d;
    background: radial-gradient(circle at 100% 0, #ffa878 5%, transparent 75%), #ff4d5d;
    
    &::before  {
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: ceil($size * 0.69); height: ceil($size * 0.69);
      border-radius: 50%;
      background: radial-gradient(circle at 0 75%, transparent 20%, #98000e $grad-stop);
      mask: $noise, radial-gradient(circle at 50%, transparent $grad-start, #000 ($grad-stop + 10%));
    }

    &:hover {
        animation: spin-flat-thick $duration linear infinite;
      
      &.item--cell::before {
         animation: spin-flat $duration linear infinite;
      }
      
      &:active {
      animation: spin-flat-thick $duration linear infinite, hue-rotate 7s linear infinite;
      }
    }
  }

  &--color1 {
    @include item-unicolor($color1);
  }
  
  &--color2 {
    @include item-unicolor($color2);
  }
  
  &--color3 {
    @include item-unicolor($color3);
  }
  
  &--color4 {
    @include item-unicolor($color4);
  }

  &--color5 {
    @include item-tricolor($light, $color9, $color10);
  }

  &--color6 {
    @include item-bicolor($color6, $color5);
  }

  &--color7 {
    @include item-tricolor($color4, $color7, $color8);
  }
  
  &--color8 {
    @include item-unicolor($dark);
  }
}

@keyframes spin-round {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes spin-flat {
  0% { transform: translate(-50%, -50%) rotateY(0); }
  25% { transform: translate(-50%, -50%) rotateY(90deg); }
  50% { transform: translate(-50%, -50%) rotateY(180deg); }
  75% { transform: translate(-50%, -50%) rotateY(270deg); }
  100% { transform: translate(-50%, -50%) rotateY(360deg); }
}

@keyframes spin-flat-thick {
  0% { transform: scale($scale) rotateY(0); }
  25% { transform: scale($scale) rotateY(75deg); }
  50% { transform: scale($scale) rotateY(0); background: radial-gradient(circle at 0 0, #ffa878 5%, transparent 75%), #ff4d5d; }
  75% { transform: scale($scale) rotateY(75deg); }
  100% { transform: scale($scale) rotateY(0); background: radial-gradient(circle at 100% 0, #ffa878 5%, transparent 75%), #ff4d5d; }
}

@keyframes hue-rotate {
  from { filter: hue-rotate(360deg); }
    to { filter: hue-rotate(0deg); }
}

View Compiled

Run Pen

This Pen is owned by David J. Aldred on CodePen.

See more by @DavidJAldred on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.