Site menu

CodeCook.io

  • Languages
    • C
    • C++
    • CSS
    • Git
    • HTML
    • Java
    • JavaScript
    • jQuery
    • PHP
    • Python
    • Ruby
    • Scala
  • background
  • color
  • gradient
  • image
  • linear

CSS - Linear gradient

The CSS linear-gradient() function creates an image which represents a linear gradient of colors. [...] Linear gradients are defined by an axis, the gradient line, with each point on it being of a different color. Perpendicular lines to the gradient-line have one single color, the one of the point on the gradient line. CSS linear-gradient on MDN

angle of gradient axis in degrees
1
405
  • Share on Facebook
  • Share on Google+
  • Share on Twitter

Implementation with vendor prefixes borrowed from CSS3 Please!

angle gradient
.angle-gradient {
  background-color: {{color1}}; /* default/fallback background */
  background-image: -webkit-linear-gradient({{angle}}deg, {{color1}}, {{color2}}); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  background-image:         linear-gradient({{angle}}deg, {{color1}}, {{color2}}); /* Chrome 26, Firefox 16+, IE 10+, Opera */
}
css
vertical gradient
.vertical-gradient {
  background-color: {{color1}}; /* default/fallback background */
  background-image: -webkit-linear-gradient(top,       {{color1}}, {{color2}}); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  background-image:         linear-gradient(to bottom, {{color1}}, {{color2}}); /* Chrome 26, Firefox 16+, IE 10+, Opera */
}
css

Notes

last update: Nov. 11, 2014

Advertisement

This project is hosted on DigitalOcean, try it and support us

Related concept

  • Box-shadow

Random task

  • Highest value of array of numbers
  • Delete local branch
  • Object inner function
  • Loop while condition is true
  • List files with merge conflict
  • Blog
  • About
  • License