LoveCSS.comLoveCSS

CSS Neumorphism Generator

CSS

.neumorphic {
  background: #e0e0e0;
  border-radius: 40px;
  box-shadow:
    20px 20px 40px #adadad,
    -20px -20px 40px #ffffff;
}

Component

Surface

Light Direction

%
%

Base Color

Border Radius

px

Presets

About CSS Neumorphism Generator

Create the soft, raised and pressed UI effects used in modern neumorphic designs. Customize shadows, highlights, colors, and shapes, then copy the CSS instantly.