lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
79 lines (64 loc) • 3.21 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Gradient</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap");
/* Custom styles for the gradient mask effect */
.card {
position: relative;
}
.card::before {
position: absolute;
content: "";
top: 0;
width: 100%;
height: 100%;
border-radius: 2.25rem;
z-index: -1;
border: 0.155rem solid transparent;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
.green::before {
background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #01c3a8) border-box;
}
.blue::before {
background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #1890ff) border-box;
}
/* Ensure proper font loading */
body {
font-family: "Nunito", sans-serif;
}
</style>
</head>
<body class="min-h-screen bg-[#232228] font-nunito grid place-items-center overflow-x-hidden">
<section class="w-full max-w-[50em] mx-auto py-20 flex justify-center flex-wrap gap-12 relative z-10">
<!-- Green Card -->
<div id="greenCard" class="card green bg-[radial-gradient(ellipse_at_right_top,_#107667ed_0%,_#151419_47%,_#151419_100%)] max-w-[20rem] min-h-[20rem] w-[90%] grid place-content-center place-items-center text-center relative shadow-[1px_12px_25px_rgba(0,_0,_0,_0.78)] rounded-[2.25rem] transition-all duration-300">
</div>
<!-- Blue Card -->
<div id="blueCard" class="card blue bg-[radial-gradient(ellipse_at_right_top,_#00458f8f_0%,_#151419_45%,_#151419_100%)] max-w-[20rem] min-h-[20rem] w-[90%] grid place-content-center place-items-center text-center relative shadow-[1px_12px_25px_rgba(0,_0,_0,_0.78)] rounded-[2.25rem] transition-all duration-300">
</div>
</section>
<script>
const greenCard = document.getElementById('greenCard');
const blueCard = document.getElementById('blueCard');
document.addEventListener('mousemove', (e) => {
// Get mouse position
const x = e.clientX;
const y = e.clientY;
// Create the gradient for the green and blue cards using mouse position
const greenCardGradient = `radial-gradient(circle at ${x}px ${y}px, #107667ed 0%, #151419 47%, #151419 100%)`;
const blueCardGradient = `radial-gradient(circle at ${x}px ${y}px, #00458f8f 0%, #151419 45%, #151419 100%)`;
// Set the gradient background for the cards
greenCard.style.background = greenCardGradient;
blueCard.style.background = blueCardGradient;
});
</script>
</body>
</html>