Emboss effect

For emboss effect we need 3 borders (Base Border, Inner Border, Outer Border) and 3 colors for diagonal light direction (4 colors for vertical light direction).

Imagine that we have an element selector .block. Then Base Border will be added to the .block via CSS property border.

Inner and Outer borders will be added via pseudo-elements :before and :after.

CSS Border Emboss

Codepen Demo

How to use

  // in some.scss
@import "border-emboss";

  • Use mixin:
  /* in input.scss */
.rounded {
    @include border-emboss(#666, #888, #444, $radius: 10px, $width: 10px);
}

Customize

  • $base - Base color for border.
  • $lighter - Lighter color (patch of reflected light).
  • $darker - Darker color for side with shadow.
  • $darkest - The darkest color for side with shadow, if has been set then the shadow will be emulate as from vertical light(from top to bottom).
  • $width - Width of border (separately for darker, lighter and base color).
  • $radius - Border radius.
  • $width2 - Width of outer side of border*.
  • $width3 - Width of inner side of border*.

* If not set then equals $width


3,106 1 9