<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)
);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.