<div id="heroRef" class="hero use-gradient">
  <h1 class="title">Gradients Madness!</h1>
<!-- https://www.jetbrains.com/aqua/ reproduction -->
  <div class="cards">
    <div class="card use-gradient use-gradient-hover aqua-card">
      <div class="aqua-card__content">
        <img src="https://www.jetbrains.com/aqua/img/selenium_logo.png" alt="Selenium" height="48" class="aqua-card__img">
        <h3 class="wt-offset-top-16">Selenium</h3>
        <div class="wt-offset-top-16 aqua-card__description">
          <p>Benefit from rich support for the Selenium ecosystem in Java, Kotlin, and Python.</p>
          <p class="wt-offset-top-16"><a href="https://lp.jetbrains.com/selenium-1591/" class="rs-link rs-link_mode_standalone">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="card use-gradient use-gradient-hover aqua-card">
      <div class="aqua-card__content">
        <img src="https://www.jetbrains.com/aqua/img/cypress_logo.svg" alt="Cypress" height="48" class="aqua-card__img">
        <h3 class="wt-offset-top-16">Cypress</h3>
        <div class="wt-offset-top-16 aqua-card__description">
          <p>Run and debug tests with a tool that understands aliases and locators.</p>
          <p class="wt-offset-top-16"><a href="https://lp.jetbrains.com/cypress-1590/" class="rs-link rs-link_mode_standalone">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="card use-gradient use-gradient-hover aqua-card">
      <div class="aqua-card__content">
        <img src="https://www.jetbrains.com/aqua/img/playwright_logo.svg" alt="Playwright" height="48" class="aqua-card__img">
        <h3 class="wt-offset-top-16">Playwright</h3>
        <div class="wt-offset-top-16 aqua-card__description">
          <p>Develop and maintain your Playwright tests with advanced code assistance in JavaScript and TypeScript.</p>
          <p class="wt-offset-top-16"><a href="https://lp.jetbrains.com/playwright-1586/" class="rs-link rs-link_mode_standalone">Learn more</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --r {
  syntax: '<length>'; /* <- defined as type number for the transition to work */
  initial-value: 0;
  inherits: false;
}
:root {
  --color-text: rgba(255, 255, 255, 0.9);
  --color-background: #090909;
  --clr-1: #4ca6ff;
  --clr-2: #00b300;
  --clr-3: #d65348;
  font-size: 62.5%;
}
body {
  height: 100vh;
  display: flex;
  align-content: center;
  background: var(--color-background);
  font-family: Raleway, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Droid Sans", "Helvetica Neue", Arial,
    sans-serif;
}
.hero {
  height: 100vh;
  width: 100%;
  background-image: radial-gradient(
    circle farthest-side at var(--x, 100px) var(--y, 100px),
    #1250aa 0%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 80px;
  color: var(--color-text);
  pointer-events: none;
  font-family: 'Cairo Play', Raleway, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Droid Sans", "Helvetica Neue", Arial,
    sans-serif;
}
.cards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  column-gap: 2vw;
  max-width: 90%;
}
.aqua-card {
  background: #19191c99;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
  padding: 24px;
  border-radius: 16px;
  --x: 0;
  --y: 0;
  transition: --r 0.2s ease;
  position: relative;
}
.aqua-card.use-gradient-hover {
  background: radial-gradient(circle at var(--x, 100px) var(--y, 100px), rgb(76, 166, 255) 0%, rgba(76, 166, 255, 0) calc(0% + var(--r, 200px))) no-repeat border-box border-box #0A1018;
}
.aqua-card.use-gradient-hover:hover {
  --r: 200px
}
.aqua-card>* {
  pointer-events: none
}
.aqua-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
}
.aqua-card__img {
  height: 48px;
}
.aqua-card h3 {
  color: #fff;
  font-size: 20px;
  line-height: 28px;
}
.aqua-card__description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  flex-grow: 1;

}
.rs-link {
  color: #ffffff;
  padding-bottom: 1px;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  pointer-events: all;
}
.rs-link_mode_standalone:after {
  content: "\2192";
  display: inline;
  margin-right: 0.15em;
  margin-left: 0.15em;
  -webkit-transition: margin-right 0.3s, margin-left 0.3s;
  transition: margin-right 0.3s, margin-left 0.3s;
}
.wt-offset-top-16 {
  margin-top: 16px;
}


/* border gradient https://codepen.io/kevinpowell/pen/QWVKZjx */

.card::before,
.card::after {
  content: "";
  position: absolute;
  inset: -0.2rem;
  z-index: -1;
  background: conic-gradient(
    from var(--gradient-angle),
    var(--clr-1),
    var(--clr-2),
    var(--clr-3),
    var(--clr-2),
    var(--clr-1)
  );
  border-radius: inherit;
  animation: rotation 2s ease-in-out infinite;
}

.card::after {
  filter: blur(1rem);
}

@keyframes rotation {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}
const gradientsItems = document.querySelectorAll(".use-gradient");
const useGradient = (e) => {
  let rect = e.target.getBoundingClientRect();
  let x = e.clientX - rect.left;
  let y = e.clientY - rect.top;
  e.target.style.setProperty("--x", x + "px");
  e.target.style.setProperty("--y", y + "px");
};
gradientsItems.forEach((card) =>
  card.addEventListener("mousemove", useGradient)
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.