Skip to content

Instantly share code, notes, and snippets.

Created November 21, 2016 13:21
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Stripe hover blur animation
<div id="customer-logos">
<a href="" class="customer-logo-link">
<span class="button">See our customers</span>
<ul class="list">
<li><img alt="kickstarter" src="">
</li><li><img alt="twitter" src="">
</li><li><img alt="instacart" src="">
</li><li><img alt="pinterest" src="">
</li><li><img alt="lyft" src="">
</li><li><img alt="shopify" src="">
</li><li><img alt="opentable" src="">
</li><li><img alt="slack" src="">

Stripe hover blur animation

I was randomly looking for the Stripe Redesign and found it gorgeous! Attention for every detail, great design and UX! Here's the blur hover animation in their homepage.

A Pen by Riccardo Zanutta on CodePen.


body {
font-family: 'Open Sans', sans-serif;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
.customer-logo-link {
display: block;
padding: 30px 0;
&:hover {
.button {
opacity: 1;
transform: translate(-50%,-7px);
.list {
opacity: .7;
transform: scale(.95);
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns=""><f…ter id="filter"><feGaussianBlur stdDeviation="10" /></filter></svg>#filter');
filter: blur(10px);
.button {
white-space: nowrap;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
border-radius: 4px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
background: #6772e5;
text-decoration: none;
transition: all .15s ease;
position: absolute;
z-index: 1;
left: 50%;
transform: translate(-50%,5px) scale(.95);
opacity: 0;
transition: .7s cubic-bezier(.19,1,.22,1);
.list {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
justify-content: space-between;
transition: 1s cubic-bezier(.19,1,.22,1);
will-change: transform;
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns=""><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter');
filter: blur(0);
li {
margin: 0 13px;
img {
height: 20px;
vertical-align: middle;
<link href="" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment