Skip to content

Instantly share code, notes, and snippets.

@gidhon
Last active July 23, 2018 10:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gidhon/7238003 to your computer and use it in GitHub Desktop.
Save gidhon/7238003 to your computer and use it in GitHub Desktop.
A Pen by Gideon Kreitzer.
// ######################################### MIXIN ##########################################
linear_gradient(origin, colors...)
fallback = colors[1][0]
colors = join(', ', colors)
colors = unquote(colors)
background-color: fallback
background-image: -webkit-linear-gradient(origin, colors) // Chrome, Safari
background-image: -moz-linear-gradient(origin, colors) // Firefox (3.6 - 15)
background-image: -ms-linear-gradient(origin, colors) // IE 10
background-image: -o-linear-gradient(origin, colors) // Opera (11.1 - 12.0)
background-image: linear-gradient(origin, colors) // W3C
// #################################### IMPLEMENTATION ######################################
:root
linear_gradient(right, red, orange, yellow, green, blue, indigo, violet)
// or
body
linear_gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.3))

Stylus Mixin for Linear Gradients

A Stylus mixin for linear gradients with support for comma-separated splat arguments. In part created as a work-around / abstraction for this.

The method for retrieving the fall-back background colour can do with some improvement, such as averaging the colours or selecting a colour by means of passing an additional argument.

View it on CodePen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment