Use a Background Gradient in WP Customizer + Various other Customizer functions

customizer-pseudo-elements.js

/**
 * Make the WP Customizer also recognize and adjust pseudo- elements like :before and :hover
 * Non-instantaneous update - requires partial page refresh
 */

// Highlight colors
wp.customize( 'highlight_color', function( value ) {
    value.bind( function( to ) {
      
		    $( 'a:visited, a:hover, a:focus, a:active, .entry-content a, .entry-summary a' ).css( {
            'color': to 
        } );
        $( '.search-toggle, .search-box-wrapper' ).css( {
            'background-color': to
        } );

        // For Sticky Posts headers (using :before pseudo-class)
        // @see http://wpgothemes.com/add-customizer-color-pickers-for-hover-styles/
        var style, el;

        style = '<style class="sticky-post-label">.sticky:before { background: ' + to + '; }</style>';
        el = $( '.sticky-post-label' ); // look for a matching style element

        // add the style element into the DOM or replace the matching style element
        if( el.length ) {
            el.replaceWith( style );
        } else {
            $( 'head' ).append( style ); // style element doesn't exist so add it
        }
                        
		} );
	} );

customizer.js

// Custom Customizer Functions
// Header Gradient color
// Set default colors
grad1_color = '#085078';
grad2_color = '#85d8ce';
grad3_color = '#f8fff3';

wp.customize( 'grad1_color', function( value ) {
  value.bind( function( to ) {
  	grad1_color = to;
        $( '.custom-header' ).css( {
            'background': 'radial-gradient( ellipse farthest-side at 100% 100%, '
                    .concat( grad3_color ).concat( ' 10%, ' )
                    .concat( grad2_color ).concat( ' 50%, ' )
                    .concat( grad1_color ).concat( ' 120% )' )
        } );
  } );
} );
wp.customize( 'grad2_color', function( value ) {
  value.bind( function( to ) {
  	grad2_color = to;
        $( '.custom-header' ).css( {
            'background': 'radial-gradient( ellipse farthest-side at 100% 100%, '
                    .concat( grad3_color ).concat( ' 10%, ' )
                    .concat( grad2_color ).concat( ' 50%, ' )
                    .concat( grad1_color ).concat( ' 120% )' )
        } );
  } );
} );
wp.customize( 'grad3_color', function( value ) {
  value.bind( function( to ) {
  	grad3_color = to;
        $( '.custom-header' ).css( {
            'background': 'radial-gradient( ellipse farthest-side at 100% 100%, '
                    .concat( grad3_color ).concat( ' 10%, ' )
                    .concat( grad2_color ).concat( ' 50%, ' )
                    .concat( grad1_color ).concat( ' 120% )' )
        } );
  } );
} );

customizer.php

<?php
/* ///////////////// GRADIENT ////////////////// */

/*
 * Use Gradient Checkbox
 */
// Use Gradient Setting
$wp_customize->add_setting( 'use_gradient', array(
    'default'           => 0,
) );
// Use Gradient Control
$wp_customize->add_control(
        new WP_Customize_Control(
                $wp_customize,
                'use_gradient',
                array( 
                    'label'         => __( 'Use Header Gradient?', 'jin' ),
                    'type'          => 'checkbox',
                    'section'       => 'header_image',
                )
) );

/* 
 * Gradient Color #1 
 */
// Gradient #1 Color Setting
$wp_customize->add_setting( 'grad1_color', array(
    'default'           => '#085078',
    'type'              => 'theme_mod',
    'sanitize_callback' => 'sanitize_hex_color',
    'transport'         => 'postMessage'
) );
// Gradient #1 Color Control
$wp_customize->add_control( 
        new WP_Customize_Color_Control(
                $wp_customize,
                'grad1_color', array(
                    'label'         => __( 'Header Gradient: Top-Left Color', 'jin' ),
                    'description'   => __( 'Set or change the upper left gradient starting color.', 'jin' ),
                    'section'       => 'header_image',
                )
) );

/* 
 * Gradient Color #2 
 */
// Gradient #2 Color Setting
$wp_customize->add_setting( 'grad2_color', array(
    'default'           => '#85D8CE',
    'type'              => 'theme_mod',
    'sanitize_callback' => 'sanitize_hex_color',
    'transport'         => 'postMessage'
) );
// Gradient #2 Color Control
$wp_customize->add_control( 
        new WP_Customize_Color_Control(
                $wp_customize,
                'grad2_color', array(
                    'label'         => __( 'Header Gradient: Center Color', 'jin' ),
                    'description'   => __( 'Set or change the center gradient color.', 'jin' ),
                    'section'       => 'header_image',
                )
) );

/* 
 * Gradient Color #3 
 */
// Gradient #3 Color Setting
$wp_customize->add_setting( 'grad3_color', array(
    'default'           => '#F8FFF3',
    'type'              => 'theme_mod',
    'sanitize_callback' => 'sanitize_hex_color',
    'transport'         => 'postMessage'
) );
// Gradient #3 Color Control
$wp_customize->add_control( 
        new WP_Customize_Color_Control(
                $wp_customize,
                'grad3_color', array(
                    'label'         => __( 'Header Gradient: Bottom-Right Color', 'jin' ),
                    'description'   => __( 'Set or change the lower right gradient ending color.', 'jin' ),
                    'section'       => 'header_image',
                )
) );
?>

functions.php

<?php
/**
 * Support for Custom Background
 */

// Set up the WordPress core custom background feature.
	add_theme_support( 'custom-background', apply_filters( 'jkl_custom_background_args', array(
		'default-color'     => 'ffffff',
		'default-image'     => '',
                'wp-head-callback'  => 'jkl_custom_background_cb'
	) ) );

/**
 * Custom Background Callback to style an ADDITIONAL element(s) with 
 * the chosen custom background color in body.custom-background
 * 
 * @link http://wordpress.stackexchange.com/questions/189361/add-custom-background-to-div-in-home-page
 */
function jkl_custom_background_cb() {
    ob_start();
    _custom_background_cb(); // Default WordPress handler
    $style = ob_get_clean();
    $style = str_replace( 'body.custom-background', 'body.custom-background, .site-logo-housing, .site-logo', $style );
    echo $style;
}