Background Gradients

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




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>


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-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>


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>