Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <div style="width:880px;margin:25px auto;text-align:center;">

    <div style="display:block;margin-bottom:50px;overflow:hidden;">
        <h1 style="font-family:Arial, Helvetica, sans-serif;font-size:22px;">Linear gradient examples</h1>

        <div class="gradient blue-linear"></div>    <!-- Blue linear -->
        <div class="gradient green-linear"></div>   <!-- Green linear -->

    <div style="display:block;margin-bottom:50px;overflow:hidden;">
        <h1 style="font-family:Arial, Helvetica, sans-serif;font-size:22px;">Radial gradient examples</h1>

        <div class="gradient red-radial"></div>     <!-- Red radial -->
        <div class="gradient orange-radial"></div>  <!-- Orange radial -->

    Author: Ryan Fitton (
    Date: 04/01/2019
    This is an example of how CSS3 gradients can be used as a background for HTML elements.
    This has been browser tested and works in all latest versions of Chrome, FireFox, Safari, iOS and Android browsers. It even works in Internet Explorer 10+ (Anything below this will use the solid fall-back colour or MS filters.)

    This SitePoint article helped with a lot of the mixin coding:

    Functions for Gradients

        Convert to IE Hex String (ie-hex-str)
    @function custom_ieHexStr($value) {
        //Default variables
        $result: null;
        //Convert $value to IE Hex String
        $result: ie-hex-str($value);
        //Return the result
        @return $result;
        Convert angle
        @param {Number} $value - Value to convert
        @param {String} $unit - Unit to convert to
        @return {Number} Converted angle
    @function custom_convert-angle($value, $unit) {
        $convertable-units:deg grad turn rad;
        $conversion-factors:1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);

        @if index($convertable-units, unit($value)) and index($convertable-units, $unit) {
            @return $value
            / nth($conversion-factors, index($convertable-units, unit($value)))
            * nth($conversion-factors, index($convertable-units, $unit));

        @warn "Cannot convert `#{unit($value)}` to `#{$unit}`.";

        Test if `$value` is an angle
        @param {*} $value - Value to test
        @return {Bool}
    @function custom_is-direction($value) {
        $is-direction:index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
        $is-angle:type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));

        @return $is-direction or $is-angle;

        Convert a direction to legacy syntax
        @param {Keyword | Angle} $value - Value to convert
        @require {function} custom_is-direction
        @require {function} custom_convert-angle
    @function custom_legacy-direction($value) {
        @if custom_is-direction($value) == false {
            @warn "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be an angle or a direction";

        $conversion-map: ( 
            to top          : bottom,
            to top right    : bottom left,
            to right top    : left bottom,
            to right        : left,
            to bottom right : top left,
            to right bottom : left top,
            to bottom       : top,
            to bottom left  : top right,
            to left bottom  : right top,
            to left         : right,
            to left top     : right bottom,
            to top left     : bottom right

        @if map-has-key($conversion-map, $value) {
            @return map-get($conversion-map, $value);

        @return 90deg - custom_convert-angle($value, 'deg');

    Mixins for Gradients - 

        Linear Gradient

        Mixin printing a linear-gradient as well as a plain color fallback and the `-webkit-` prefixed declaration
        @param {String} $color-fallback - Fallback color
        @param {String | List | Angle} $direction - Linear gradient direction
        @param {Color} $ie-gradient-color-start - The IE gradient filter start color.
        @param {Color} $ie-gradient-color-end - The IE gradient filter end color.
        @param {Arglist} $color-stops - List of color-stops composing the gradient. Should be in an RGBa format.
    @mixin custom_linear-gradient($color-fallback, $direction, $ie-gradient-color-start, $ie-gradient-color-end, $color-stops...) {
        @if custom_is-direction($direction) == false {
            //$color-stops:($direction, $color-stops); - Not required, this causes errors with the IE gradient filters
            $direction:180deg; //Default direction is vertical

        /***** Background colours *****/
            //Fallback colour
                Disabled as all modern browsers should use 'Vendor Prefixes', or the standard version. IE 8 to IE9 will use the filters. Note: IE9 will used this as it does not support CSS3 'linear-gradients, this is the reason why this has been disabled.
                By not enabling this, IE9 will flicker on dropdown tabs with no dropdown menus

            //Vendor prefixes
            background:-moz-linear-gradient(custom_legacy-direction($direction), $color-stops);        //FireFox 3.5
            background:-webkit-linear-gradient(custom_legacy-direction($direction), $color-stops);     //Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS)
            background:-ms-linear-gradient(custom_legacy-direction($direction), $color-stops);         //Internet Explorer 10 to 11

            //All modern browsers
            background: linear-gradient($direction, $color-stops);

        /***** Filters for IE8 and IE9 *****/
            //Colours for the IE filter gradients - Convert to Internet Explorer Hex String
            $ieGradientStartColor: custom_ieHexStr( $ie-gradient-color-start );
            $ieGradientLastColor: custom_ieHexStr( $ie-gradient-color-end );
            //No longer used:
                //Find the first colour in the '$color-stops' ArgList
                //$ieGradientStartColor: custom_ieHexStr( nth($color-stops,1) );

                //Find the last colour in the '$color-stops' ArgList
                //$ieGradientLastColor: custom_ieHexStr( nth($color-stops,length($color-stops)) );

            //Filters for IE8 and IE9 - These will be overlayed over 'background'. They will also prevent 'border-radius' corners from appearing
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ieGradientStartColor}, endColorstr=#{$ieGradientLastColor},GradientType=0);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ieGradientStartColor}, endColorstr=#{$ieGradientLastColor},GradientType=0)";

        Radial Gradient

        Mixin printing a radial-gradient as well as a plain color fallback
        This will work in most modern browsers and IE11+
        There is some filters setup for IE8 and IE9, they dont produce the best result, but its better than nothing!
        @param {String} $color-fallback - Fallback color
        @param {Arglist} $color-stops - List of color-stops composing the gradient
    @mixin custom_radial-gradient($color-fallback, $color-stops...) {
        background:$color-fallback;                           //Default background, this is used by the IE filter
        //background:nth($color-stops,length($color-stops));  //Not used: Use the last 'color-stop' for the IE filter instead
        background:radial-gradient(circle, $color-stops);
        //Filters for IE8 and IE9
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=65, finishopacity=100, style=2);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=65, finishopacity=100, style=2)";

    Sass (SCSS) code

    /* Colours */
    $green:       #78BA00;
    $lightGreen:  lighten($green, 75%);
    $blue:        #29B1FE;
    $lightBlue:   lighten($blue, 25%);
    $red:         #ea4848;
    $orange:      #FF8010;

    /* Graidents */
    .gradient {
        //On-screen styling
        width: 400px;
        height: 400px;
        margin: 20px;

        //Blue linear gradient
        &.blue-linear {
                Fallback color:         rgba($blue, 1)
                Direction:              false
                IE Filter Start Color:  rgba($blue, 1)
                IE Filter End Color:    rgba($lightBlue, 1)
                Colour Stops:           rgba($blue, 1), rgba($lightBlue, 1)
            @include custom_linear-gradient(
                rgba($blue, 1),         //Fallback color
                false,                  //Direction
                rgba($blue, 1),         //IE Filter Start Color
                rgba($lightBlue, 1),    //IE Filter End Color
                //Colour Stops
                rgba($blue, 1), rgba($lightBlue, 1)
        //Green linear gradient
        &.green-linear {
                Fallback color:         rgba($green, 1)
                Direction:              to right
                IE Filter Start Color:  rgba($green, 1)
                IE Filter End Color:    rgba($lightGreen, 1)
                Colour Stops:           rgba($green, 1), rgba($lightGreen, 1)
            @include custom_linear-gradient(
                rgba($green, 1),        //Fallback color
                to right,               //Direction
                rgba($green, 1),        //IE Filter Start Color
                rgba($lightGreen, 1),   //IE Filter End Color
                //Colour Stops
                rgba($green, 1), rgba($lightGreen, 1)

        //Red radial gradient
        &.red-radial {
                Fallback color:         $red - This fallback colour must be a Hex value.
                Colour Stops:           rgba($red, 0.7), rgba($red, 0.72), rgba($red, 0.74), rgba($red, 0.85), rgba($red, 1)
            @include custom_radial-gradient(
                $red,                   //Fallback color - Must be Hex value for IE filter
                //Colour Stops
                rgba($red, 0.2), rgba($red, 0.4), rgba($red, 0.74), rgba($red, 0.85), rgba($red, 1)
        //Orange radial gradient
        &.orange-radial {
                Fallback color:         $orange - This fallback colour must be a Hex value.
                Colour Stops:           rgba($orange, 0.7), rgba($orange, 0.72), rgba($orange, 0.74), rgba($orange, 0.85), rgba($orange, 1)
            @include custom_radial-gradient(
                $orange,                //Fallback color - Must be Hex value for IE filter
                //Colour Stops
                rgba($orange, 1), rgba($orange, 0.6), rgba($orange, 0.2), rgba($orange, 0), rgba($orange, 0)
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.