<a class="post">
  <div class="container">
  <h2>Calculating Color: Dynamic Color Theming with Pure CSS</h2>
  <p class="desc">Did you know that you can build custom dynamic color themes without the use of JavaScript or a CSS preprocessor!? Read on!</p>
  <div class="meta">
    <div class="date">December 5, 2019</div>
  </div>
</div>
</a>

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital@0;1&family=Montserrat:wght@500&display=swap');

* {
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.post {
  --gradPoint: 40%;
  font-family: 'Amiri';
  width: 380px;
  height: 320px;
  padding: 2rem;
  text-align: center;
  display: flex;
  background: linear-gradient(var(--color1) var(--gradPoint), var(--color2) calc(var(--gradPoint) + 20%));
  cursor: pointer;
  transition: --gradPoint 0.5s, filter 0.8s;
}

@supports not (background: paint(something)) {
  .post:hover,
  .post:focus {
    filter: hue-rotate(-90deg);
  }
}

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

.container {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
}

h2 {
  font-family: 'Montserrat', serif;
  font-size: 1.4rem;
  line-height: 1.2;
}

.desc {
  text-align: left;
}

.meta {
  font-style: italic;
  font-size: 0.8;
}

      // Check for Houdini support & register property
      if (window.CSS && CSS.registerProperty) {
      window.CSS.registerProperty({
      name: '--gradPoint',
      syntax: '<percentage>',
      inherits: false,
      initialValue: '40%',
      });
      }

// Color Palette
const colorPalette = ['#fa744f', '#ffbcbc', '#4cd3c2', '#b7efcd', '#edffea', '#ffe75e', '#feb72b', '#e85f99', '#9399ff', '#dab8f3', '#ea7ad7', '#ce0f3d', '#fd2eb3', '#ffc6c7']

// Select 1st color
const color1 = colorPalette[Math.floor(Math.random() * colorPalette.length)];

// Remove 1st color from list of possibilities
const remainingColors = colorPalette.filter(function(val){ return val !== color1 })

// Select 2nd color
const color2 = remainingColors[Math.floor(Math.random() * remainingColors.length)];

// Set color values on the element
document.querySelector('.post').style.setProperty('--color1', color1)
document.querySelector('.post').style.setProperty('--color2', color2)