Box shadow

Read all shadow variables

Default Box shadow scale

Ravenbright box shadow variable is defined globally and begin with the prefix ---rbrh-shadow-{size}. This variable can be used and customized on various components.

Variable	Value
--rbrh-shadow-xs	0 .125rem .625rem -0.375rem rgba(0,0,0,.1), 0px .25rem .75rem -0.125rem rgba(0,0,0,.1)
--rbrh-shadow-sm	0 .125rem .875rem -0.5rem rgba(0,0,0,.15),0px .125rem .75rem -0.125rem rgba(0,0,0,.1)
--rbrh-shadow-md	0rem .75rem 2.5rem -0.375rem rgba(0,0,0,.15),-0.125rem 3rem .875rem -2.5rem rgba(0,0,0,.15);
--rbrh-shadow-lg	0rem .875rem 1.5rem -0.5rem rgba(0,0,0,0.25);
--rbrh-shadow-xl	-0.125rem 1.125rem 3rem -0.875rem rgba(0,0,0,.275);
--rbrh-shadow-inset-xs	inset 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--rbrh-shadow-inset-sm	inset 0px 1px 4px 0px rgba(0, 0, 0, 0.08);
--rbrh-shadow-inset-md	inset 0px 2px 4px 0px rgba(0, 0, 0, 0.1);

Usage

Shadow-xsShadow-smShadow-mdShadow-lgShadow-xlinset-xsinset-sminset-md

To use the box-shadow, you can place the CSS variables inside component selector.

.btn-md {
  box-shadow: var(--rbrh-shadow-sm);
}

Customizing

To modify the border-radius value, you can edit these variables in css-variables:

/* Box shadow */
--rbrh-shadow-xl: -0.125rem 1.125rem 3rem -0.875rem rgba(0, 0, 0, 0.275);
--rbrh-shadow-lg: 0rem 0.875rem 1.5rem -0.5rem rgba(0, 0, 0, 0.4);
--rbrh-shadow-md: 0rem 0.75rem 2.5rem -0.375rem rgba(0, 0, 0, 0.15),
    -0.125rem 3rem 0.875rem -2.5rem rgba(0, 0, 0, 0.15);
--rbrh-shadow-xs: 0 0.125rem 0.625rem -0.375rem rgba(0, 0, 0, 0.1),
    0px 0.25rem 0.75rem -0.125rem rgba(0, 0, 0, 0.1);
--rbrh-shadow-inset-xs: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--rbrh-shadow-inset-sm: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
--rbrh-shadow-inset-md: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.1);

tip

Checkout the complete tutorial on how to customize & add new design variable in CSS variables