Curated collection of gradient backgrounds

curated-collection-of-gradient-backgrounds.markdown

Curated collection of gradient backgrounds

Got some gradient background?!

A Pen by Kevin Jannis on CodePen.

License.

index.html

<div class="hero hero--intro"></div>
<div class="hero hero--1"></div>
<div class="hero hero--2"></div>
<div class="hero hero--3"></div>
<div class="hero hero--4"></div>
<div class="hero hero--5"></div>
<div class="hero hero--6"></div>
<div class="hero hero--7"></div>
<div class="hero hero--8"></div>
<div class="hero hero--9"></div>
<div class="hero hero--10"></div>

script.js

/* 
  Got some more cool color combinations? Let me know and I will add them..
*/

style.scss

@import "http://fonts.googleapis.com/css?family=Lato:300";

$gradients: (
  intro: (
    from: #4567b2,
    to: #8ab9ff
  ),
  1: (
    from: #76ad39,
    to: #cdff8a
  ),
  2: (
    from: #b24592,
    to: #f15f79
  ),
  3: (
    from: #432b58,
    to: #734b6f
  ),
  4: (
    from: #904e95,
    to: #e96450
  ),
  5: (
    from: #ff5f6d,
    to: #ffc371
  ),
  6: (
    from: #ff9068,
    to: #ff4b1f
  ),
  7: (
    from: #ffa000,
    to: #ff5000
  ),
  8: (
    from: #b993d8,
    to: #8ca6dc
  ),
  9: (
    from: #3ca55f,
    to: #b5ac59
  ),
  10: (
    from: #2a99ef,
    to: #52d9e5
  )
);

.hero {
  position: relative;
  width: 100%;
  height: 110vh;
  
  color: white;
  text-align: center;
  font-family: Lato, sans-serif;
  font-weight: 300;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
  
  border-bottom: solid 5px white;
  
  &:before,
  &:after {
    position: absolute;
    display: block;
    top: 50%;
    left: 0;
    right: 0;
    max-width: 600px;
    margin: 0 auto;
  }
  
  &:before {
    content: "Good news, everyone!";
    font-size: 46px;
    line-height: 60px;
    margin-top: -40px;
  }
  
  &:after {
    content: "I've taught the toaster to feel love!";
    font-size: 20px;
    line-height: 30px;
    margin-top: 20px;
  }
  
  &--intro {
    &:before {
      content: "Gradient backgrounds";
    }
    
    &:after {
      content: "A curated collection";
    }
  }
  
  @each $index, $gradient in $gradients {
    &--#{$index} {
      background: linear-gradient(
        135deg,
        map-get($gradient, 'from') 20%,
        map-get($gradient, 'to') 80%
      );
    }
  }
}