Skip to content

Instantly share code, notes, and snippets.

@wrapcoders

wrapcoders/demo-hero-image-x-css-gradient-2.markdown

Created December 27, 2021 14:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save wrapcoders/26bed54d7849e3f677b90d9f7f346f00 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save wrapcoders/26bed54d7849e3f677b90d9f7f346f00 to your computer and use it in GitHub Desktop.
Download ZIP
Demo: Hero Image × CSS Gradient #2
Raw
index.html
<div class="hero">
<h1>Hero Image × CSS Gradient<span>- Gradient Animation -</span></h1>
</div>
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,300);
* {
margin: 0;
padding: 0;
}
.hero {
height: 100vh;
background: linear-gradient(45deg, rgba(255,175,189,.7), rgba(100,216,243,.7), rgba(234,236,198,.7), rgba(245,146,176,.7), rgba(52,219,216,.7)) 0 0 / 1000% no-repeat, url(https://picsum.photos/g/2000/1200?image=443) 0 0 / cover no-repeat;
-webkit-animation: gradientAnimation 40s ease infinite;
animation: gradientAnimation 40s ease infinite;
}
@-webkit-keyframes gradientAnimation {
0% { background-position: 0% 30%, 0 0;}
50% { background-position: 100% 70%, 0 0;}
100% { background-position: 0% 30%, 0 0;}
}
@keyframes gradientAnimation {
0% { background-position: 0% 30%, 0 0;}
50% { background-position: 100% 70%, 0 0;}
100% { background-position: 0% 30%, 0 0;}
}
h1 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 600 72px/1 'Open Sans', sans-serif;
text-align: center;
white-space: nowrap;
}
h1 span {
display: block;
margin-top: 1em;
font-size: 40px;
font-weight: 300;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment