Background Gradients

Dialtone provides background gradient classes, as well as the ability to control color distance and direction.

Colors

.d-bgg-slate
.d-bgg-slate-light
.d-bgg-slate-lighter
.d-bgg-slate-lightest
.d-bgg-ash-darkest
.d-bgg-ash-darker
.d-bgg-ash-dark
.d-bgg-ash
.d-bgg-blue-dark
.d-bgg-blue
.d-bgg-blue-light
.d-bgg-blue-lighter
.d-bgg-navy
.d-bgg-navy-light
.d-bgg-navy-lighter
.d-bgg-navy-lightest
.d-bgg-bright-emerald-dark
.d-bgg-bright-emerald
.d-bgg-bright-emerald-light
.d-bgg-bright-emerald-lighter
.d-bgg-emerald-darker
.d-bgg-emerald-dark
.d-bgg-emerald
.d-bgg-emerald-light
.d-bgg-emerald-lighter
.d-bgg-sunflower-dark
.d-bgg-sunflower
.d-bgg-sunflower-light
.d-bgg-sunflower-lighter
.d-bgg-wildberry-dark
.d-bgg-wildberry
.d-bgg-wildberry-light
.d-bgg-wildberry-lighter
.d-bgg-crimson-dark
.d-bgg-crimson
.d-bgg-crimson-light
.d-bgg-crimson-lighter
.d-bgg-berry-dark
.d-bgg-berry
.d-bgg-berry-light
.d-bgg-berry-lighter
.d-bgg-rose-darker
.d-bgg-rose-dark
.d-bgg-rose
.d-bgg-rose-light

Directions

By default, all .d-bgg-[color] classes have a gradient direction of right to left. You can change this though by applying a .d-bgd-[direction] class, which overrides the default CSS var.

Class Output
.d-bgd-top-left --bgg-direction: to top left !important;
.d-bgd-top --bgg-direction: to top !important;
.d-bgd-top-right --bgg-direction: to top right !important;
.d-bgd-right --bgg-direction: to right !important;
.d-bgd-bottom-right --bgg-direction: to bottom right !important;
.d-bgd-bottom --bgg-direction: to bottom !important;
.d-bgd-bottom-left --bgg-direction: to bottom left !important;
.d-bgd-left --bgg-direction: to left !important;
.d-bgg-ash .d-bgd-top-left
.d-bgg-ash .d-bgd-top
.d-bgg-ash .d-bgd-top-right
.d-bgg-ash .d-bgd-right
.d-bgg-ash .d-bgd-bottom-right
.d-bgg-ash .d-bgd-bottom
.d-bgg-ash .d-bgd-bottom-left
.d-bgg-ash .d-bgd-left
<div class="d-bgg-ash d-bgd-top"></div>
<div class="d-bgg-ash d-bgd-top-left"></div>
<div class="d-bgg-ash d-bgd-top-right"></div>
<div class="d-bgg-ash d-bgd-right"></div>
<div class="d-bgg-ash d-bgd-bottom-right"></div>
<div class="d-bgg-ash d-bgd-bottom"></div>
<div class="d-bgg-ash d-bgd-bottom-left"></div>
<div class="d-bgg-ash d-bgd-left"></div>

Percentage

By default, all colors in the .d-bgg-[color] classes are determined by lightening and darkening the core color by 7.5%. You can reduce or increase this percentage by using a .d-bgp-[sm|lg|xl] class, which overrides the default CSS var.

Size Class Output
Small .d-bgp-sm --bgg-percentage: 2.5% !important;
Default N/A --bgg-percentage: 7.5% !important;
Large .d-bgp-lg --bgg-percentage: 12.5% !important;
Extra Large .d-bgp-xl --bgg-percentage: 17.5% !important;
.d-bgg-blue-light .d-bgp-sm
.d-bgg-blue-light
.d-bgg-blue-light .d-bgp-lg
.d-bgg-blue-light .d-bgp-xl
<div class="d-bgg-blue-light d-bgp-sm"></div>
<div class="d-bgg-blue-light"></div>
<div class="d-bgg-blue-light d-bgp-lg"></div>
<div class="d-bgg-blue-light d-bgp-xl"></div>

Opacity

In addition to the percentage and direction controls above, Dialtone also provides the ability for you to control one background color's opacity using the .d-bgo[#] classes.

.d-bgg-slate .d-bgo0
.d-bgg-slate .d-bgo10
.d-bgg-slate .d-bgo25
.d-bgg-slate .d-bgo50
.d-bgg-ash .d-bgo75
.d-bgg-ash .d-bgo90
.d-bgg-ash .d-bgo95
.d-bgg-ash .d-bgo99
.d-bgg-ash .d-bgo100
<p class="d-bgg-slate d-bgp-lg d-bgo0"></p>
<p class="d-bgg-slate d-bgp-lg d-bgo10"></p>
<p class="d-bgg-slate d-bgp-lg d-bgo25"></p>
<p class="d-bgg-slate d-bgp-lg d-bgo50"></p>
<p class="d-bgg-ash d-bgp-lg d-bgo75"></p>
<p class="d-bgg-ash d-bgp-lg d-bgo90"></p>
<p class="d-bgg-ash d-bgp-lg d-bgo95"></p>
<p class="d-bgg-ash d-bgp-lg d-bgo99"></p>
<p class="d-bgg-ash d-bgp-lg d-bgo100"></p>