Skip to content

Instantly share code, notes, and snippets.

@JeffreyWay

JeffreyWay/example.html

Created February 25, 2021 20:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JeffreyWay/1b609e460a2fe7c26b50f50e9497801f to your computer and use it in GitHub Desktop.
Save JeffreyWay/1b609e460a2fe7c26b50f50e9497801f to your computer and use it in GitHub Desktop.
Download ZIP
CSS background gradient transition on hover example
Raw
example.html
<!doctype html>
<title>Gradient Transition Example</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<style>
.card {
position: relative;
background: linear-gradient(to bottom, #90cdf4, #2c5282)
}
.card:after {
content: '';
opacity: 0;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: inherit;
transition: opacity .3s;
background: linear-gradient(to bottom, red, purple)
}
.card:hover:after {
opacity: 1;
}
</style>
<body class="grid place-items-center min-h-screen">
<div class="card py-6 px-10 rounded-xl text-center">
<div class="relative z-10">
<h1 class="font-semibold text-lg text-white mb-1">
Animate My Background Gradient
</h1>
<h2 class="text-gray-500">With Pseudo Classes</h2>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment