Last Updated: February 25, 2016
·
2.051K
· timpietrusky

Blurry Sweetness - A linear-gradient combination

This is just a quick combination of 3 linear-gradients to create a blurry background-image.

Picture

SCSS

html,
body {
  width: 100%;
  height: 100%;
}

body {  
  @include background-image(
    linear-gradient(125deg, rgba(206, 190, 41, .3) 0%, rgba(155, 31, 80, .3) 33%, rgba(41, 137, 216, .3) 71%, rgba(137, 180, 255, .3) 95%),
    linear-gradient(-88deg, rgba(206, 190, 41, .8) 0%, rgba(155, 31, 80, .3) 33%, rgba(41, 137, 216, .7) 71%, rgba(137, 180, 255, .7) 95%),
    linear-gradient(23deg, rgba(206, 190, 41, 1) 0%, rgba(155, 31, 80, .6) 33%, rgba(41, 137, 216, 1) 71%, rgba(137, 180, 255, 1) 95%)
  );
}

Live version

http://codepen.io/TimPietrusky/pen/itIGp