Skip to Content
Menu

linear-gradient()

Easily apply a background linear gradient to an element.

Sass February 22, 2017

Usage

Sass
linear-gradient($direction, $colors)

Parameters

$direction
(Required) (String) The gradient direction ("to right", "to bottom", etc)
Default: None

$colors
(Required) (Map) A map of colors and percentages
Default: None

Request or provide clarification »

Examples

Sass
.element {@include linear-gradient(to bottom, #31B7D7, #EDAC7D);}
Sass
.element {@include linear-gradient(to right, #E47D7D 0%, #C195D3 50%, #4FB4E8 100%);}
Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

    Located in /assets/scss/partials/_mixins.scss on line 141.

    Sass
    @mixin linear-gradient($direction, $colors...){
        background: nth(nth($colors, 1), 1); background: linear-gradient($direction, $colors);
    }
    

    Override

    To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.

    Sass
    @mixin linear-gradient($direction, $colors){
        //Write your own code here, leave it blank, or return false.
    }