Good Vibrations

Backgrounds

Overview

A couple of backgrounds use gradients and are available using the associated Sass class. Also, there are backgrounds that use SVG code to allow for improved load speed and for adjustment of color according to how the theme's primary color is set.

Background Gradient Primary Top/Bottom

This background uses the theme's primary color. Using the .gradient-brand-primary-top or .gradient-brand-primary-bottom class the linear gradient moves horizontally.

Result
HTML

Gradient Brand Primary Top

Gradient Brand Primary Bottom

                                
<!-- Gradient Brand Primary Top -->
<div class="gradient-brand-primary-top py-7 position-relative w-100">
    <p
        class="text-center position-absolute top-0 w-100 h-100 d-flex align-items-center justify-content-center">
        Gradient Brand Primary Top</p>
</div>
<!-- Gradient Brand Primary Bottom -->
<div class="gradient-brand-primary-bottom py-7 position-relative w-100">
    <p
        class="text-center position-absolute top-0 w-100 h-100 d-flex align-items-center justify-content-center">
        Gradient Brand Primary Bottom</p>
</div>

Background Gradient Primary Top Diagonal/Semi-Trans

Similar to the above, these gradient use the .gradient-brand-primary-diagonal or .gradient-brand-primary-diagonal-semi-trans class to diagonally move and adjust color as set in the theme's primary color.

Result
HTML

Background Gradient Primary Diagonal

Background Gradient Primary Diagonal Semi-Trans

                                
<!-- Background Gradient Primary Diagonal -->
<div class="gradient-brand-primary-diagonal py-7 position-relative w-100">
    <p
        class="text-center position-absolute top-0 w-100 h-100 d-flex align-items-center justify-content-center">
        Background Gradient Primary Diagonal</p>
</div>
<!-- Background Gradient Primary Diagonal Semi Transparent -->
<div class="gradient-brand-primary-diagonal-semi-trans py-7 position-relative w-100">
    <p
        class="text-center position-absolute top-0 w-100 h-100 d-flex align-items-center justify-content-center">
        Background Gradient Primary Diagonal Semi-Trans</p>
</div>

Background Double Gradient SVG

This is an SVG background that creates a double gradient effect based on the theme's primary color. As an SVG element it will adjust to whaever color the theme has set as its primary.

Result
HTML

Double Gradient Background

                                
<!-- Double Gradient Background -->
<div class="double-grad-m-neg-10 my-5 position-relative">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1366 284"
        xml:space="preserve">
        <g id="Group_617" transform="translate(0 -611.565)">
            <linearGradient id="path-103" gradientUnits="userSpaceOnUse" x1="83.4392"
                y1="1153.2516" x2="83.4392" y2="1152.2516"
                gradientTransform="matrix(1366 0 0 -195.679 -113295 226278.6406)">
                <stop offset="0" class="svg-brand-primary-stop-1" />
                <stop offset="1" class="svg-brand-primary-stop-0" />
            </linearGradient>
            <path id="Path_103" d="M0,807.2
c120.4-100.7,305.8-195.7,683-195.7s563.7,95.9,683,195.7" />
            <linearGradient id="path-104" gradientUnits="userSpaceOnUse" x1="83.4392"
                y1="1153.5861" x2="83.4392" y2="1152.5861"
                gradientTransform="matrix(1366 0 0 -262.517 -113295 303468.9062)">
                <stop offset="0" class="svg-brand-primary-stop-3" />
                <stop offset="1" class="svg-brand-primary-stop-0" />
            </linearGradient>
            <path id="Path_104" d="M0,895.5
C120.4,760.4,305.8,633,683,633s563.7,128.7,683,262.5" />
        </g>
    </svg>
    <p
        class="text-center position-absolute top-0 w-100 h-100 d-flex align-items-center justify-content-center">
        Double Gradient Background</p>
</div>

Background Double Helix Gradient SVG

Similar to the above, this is an SVG background that creates a double helix gradient effect based on the theme's primary color. As an SVG element it will adjust to whaever color the theme has set as its primary.

Result
HTML

Double Helix Gradient Background

                                
<!-- Double Helix Gradient Background -->
<div class="position-relative py-7 my-7">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1366 345"
        xml:space="preserve" class="z-0 h-100 position-absolute">

        <g id="Group_771" transform="translate(0 -1825.024)">
            <g id="Group_766" transform="translate(1365.998 3840.541) rotate(180)">
                <g id="Group_765" transform="translate(0 582)">

                    <linearGradient id="path-680" gradientUnits="userSpaceOnUse"
                        x1="1282.4373" y1="859.3569" x2="1282.4373" y2="860.3569"
                        gradientTransform="matrix(-1366 0 0 195.679 1752492.375 -167008.5)">
                        <stop offset="0" class="svg-brand-primary-stop-1" />
                        <stop offset="1" class="svg-brand-primary-stop-0" />
                    </linearGradient>
                    <path id="Path_680" d="M0,1345.2
c120.4-100.7,305.8-195.7,683-195.7s563.7,95.9,683,195.7" />

                    <linearGradient id="path-679" gradientUnits="userSpaceOnUse"
                        x1="1282.4373" y1="859.6523" x2="1282.4373" y2="860.6523"
                        gradientTransform="matrix(-1366 0 0 262.517 1752492.375 -224502.3125)">
                        <stop offset="0" class="svg-brand-primary-stop-4" />
                        <stop offset="1" class="svg-brand-primary-stop-0" />
                    </linearGradient>
                    <path id="Path_679" d="M0,1433.5
C120.4,1298.4,305.8,1171,683,1171s563.7,128.7,683,262.5" />
                </g>
            </g>
            <g id="Group_768" transform="translate(0 154.459)">
                <g id="Group_765-2" transform="translate(0 582)">

                    <linearGradient id="path-680-2" gradientUnits="userSpaceOnUse"
                        x1="83.4392" y1="1660.405" x2="83.4392" y2="1659.405"
                        gradientTransform="matrix(1366 0 0 -195.679 -113295 326055.875)">
                        <stop offset="0" class="svg-brand-primary-stop-1" />
                        <stop offset="1" class="svg-brand-primary-stop-0" />
                    </linearGradient>
                    <path id="Path_680-2" d="M0,1345.2
c120.4-100.7,305.8-195.7,683-195.7s563.7,95.9,683,195.7" />

                    <linearGradient id="path-679-2" gradientUnits="userSpaceOnUse"
                        x1="83.4392" y1="1660.7003" x2="83.4392" y2="1659.7003"
                        gradientTransform="matrix(1366 0 0 -262.517 -113295 437133.0312)">
                        <stop offset="0" class="svg-brand-primary-stop-4" />
                        <stop offset="1" class="svg-brand-primary-stop-0" />
                    </linearGradient>
                    <path id="Path_679-2" d="M0,1433.5
C120.4,1298.4,305.8,1171,683,1171s563.7,128.7,683,262.5" />
                </g>
            </g>
        </g>
    </svg>
    <p class="text-center">Double Helix Gradient Background</p>
</div>

Dot Texture SVG

This is a simple dot texture that uses the .dot-background-texture class to set the dot pattern background to the theme's primary color.

Result
HTML

Dot Texture SVG

                                
<!-- Dot Texture SVG -->
<div class="position-relative py-7 overflow-hidden">
    <div class="position-absolute dot-background-texture">
    </div>
    <p
        class="text-center position-absolute top-0 w-100 h-100 d-flex align-items-center justify-content-center">
        Dot Texture SVG</p>
</div>