Skip to content

Instantly share code, notes, and snippets.

@phedders
Created November 14, 2019 18:32
Show Gist options
  • Save phedders/61ba7a16c4e46471dfbc9549aef9977d to your computer and use it in GitHub Desktop.
Save phedders/61ba7a16c4e46471dfbc9549aef9977d to your computer and use it in GitHub Desktop.
Pure CSS Gradient Background Animation
<div class="container">
<h1>Pure CSS Animated Gradient Background</h1>
<h3><a href="https://codepen.io/P1N2O/full/pyBNzX" target="_blank">Full Screen <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="18" height="18"
viewBox="0 0 172 172"
style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#eeeeee"><path d="M143.19336,21.43001c-0.26705,0.00844 -0.53341,0.03181 -0.79785,0.06999h-34.89551c-2.58456,-0.03655 -4.98858,1.32136 -6.29153,3.55376c-1.30295,2.2324 -1.30295,4.99342 0,7.22582c1.30295,2.2324 3.70697,3.59031 6.29153,3.55376h18.53256l-66.59961,66.59961c-1.8722,1.79752 -2.62637,4.46674 -1.97164,6.97823c0.65473,2.51149 2.61604,4.4728 5.12753,5.12753c2.51149,0.65473 5.18071,-0.09944 6.97823,-1.97165l66.59961,-66.59961v18.53255c-0.03655,2.58456 1.32136,4.98858 3.55376,6.29153c2.2324,1.30295 4.99342,1.30295 7.22582,0c2.2324,-1.30295 3.59031,-3.70697 3.55376,-6.29153v-34.9235c0.28889,-2.08845 -0.35639,-4.19816 -1.76411,-5.76769c-1.40772,-1.56953 -3.43507,-2.43964 -5.54253,-2.3788zM35.83333,21.5c-7.83362,0 -14.33333,6.49972 -14.33333,14.33333v100.33333c0,7.83362 6.49972,14.33333 14.33333,14.33333h100.33333c7.83362,0 14.33333,-6.49972 14.33333,-14.33333v-43c0.03655,-2.58456 -1.32136,-4.98858 -3.55376,-6.29153c-2.2324,-1.30295 -4.99342,-1.30295 -7.22582,0c-2.2324,1.30295 -3.59031,3.70697 -3.55376,6.29153v43h-100.33333v-100.33333h43c2.58456,0.03655 4.98858,-1.32136 6.29153,-3.55376c1.30295,-2.2324 1.30295,-4.99342 0,-7.22582c-1.30295,-2.2324 -3.70697,-3.59031 -6.29153,-3.55376z"></path></g></g></svg></a></h3>
<h5><small>by</small> <a href="https://manuelpinto.in" target="_blank"> Manuel Pinto</a></h5>
</div>
<!-- <h1>Pure CSS3 Animated Gradient Background</h1>
<h2>
by Manuel Pinto
</h2> -->
// Pure CSS - No JS
// by Manuel Pinto
// https://manuelpinto.in
body {
margin: 0;
width: 100%;
height: 100vh;
font-family: "Exo", sans-serif;
color: #fff;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container {
width: 100%;
position: absolute;
top: 35%;
text-align: center;
}
h1 {
font-weight: 300;
}
h3 {
color: #eee;
font-weight: 100;
}
h5 {
color:#eee;
font-weight:300;
}
a,
a:hover {
text-decoration: none;
color: #ddd;
}
<link href="https://fonts.googleapis.com/css?family=Exo&amp;display=swap" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment