.bevel {
    position: relative;
}

.bevel::after {
    position: absolute;
    content: '';
    display: block;

    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    mix-blend-mode: overlay

    border-style: solid
    border-width: 2px
    border-color: white black black white
    filter: blur(4px)
}
r/web_design - CSS Hack: Smooth neumoprhism smooth bevels without box-shadows

You can also add some inset box-shadows on ::after for interesting effect

r/web_design - CSS Hack: Smooth neumoprhism smooth bevels without box-shadows



Source link

Write A Comment