In this post, we’ll walk you through using CSS for vibrant gradients and JavaScript for interactive animations, showcasing how to create a visually stunning effect that smoothly transitions from day to night. Whether you’re enhancing your portfolio or spicing up a project, this tutorial offers practical insights and code examples to elevate your design skills and captivate your audience.

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>

<div class="wrapper">
	<div class="hero">
		<h1 class="hero__heading">Good Night</h1>
	</div>

	<div class="hero hero--secondary" aria-hidden="true" data-hero>
		<p class="hero__heading">Good Morning</p>
	</div>
</div>
<style>
  @import url("https://fonts.googleapis.com/css?family=Montserrat:700");

* {
	box-sizing: border-box;
}

body {
	font-family: Montserrat, sans-serif;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background-color: rgb(9, 14, 23);
	color: #ffffff;
}

svg {
	opacity: 0;
	position: absolute;
}

.wrapper {
	position: relative;
}

.hero {
	min-height: 100vh;
	padding: clamp(1rem, 2vw, 5rem);
	display: flex;
	align-items: center;
}

.hero--secondary {
	--mask: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #f9d71c 2%, #f4a300 8%, #f5d22a 15%, transparent 20%);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, #f7e07f, #f9d71c, #f4a300, #f5d22a, #f9d71c);
	color: rgb(9, 14, 23);
	-webkit-mask-image: var(--mask);
	mask-image: var(--mask);
}

.hero__heading {
	font-size: clamp(2rem, 5vw, 8rem);
	text-transform: uppercase;
	margin: 0;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

</style>
<script>
  const hero = document.querySelector('[data-hero]')

window.addEventListener('mousemove', (e) => {
	const { clientX, clientY } = e
  const x = Math.round((clientX / window.innerWidth) * 100)
  const y = Math.round((clientY / window.innerHeight) * 100)
	
	gsap.to(hero, {
    '--x': `${x}%`,
    '--y': `${y}%`,
    duration: 0.3,
    ease: 'sine.out',
  })
})
</script>