How to create this effect using CSS? neumorphism or glassmorphism-CodePudding

Oops my friends, I'm trying to replicate this card but I'm not able to replicate this effect, can you help me with this? I believe it is with box-shadow and linear or radial. But I can't leave this effect

CodePudding user response：

It's pretty hard to see the exact effect applied here since your screenshot is quite pixelated but this may be what you are looking for: (Run the code snippet)

body {
  align-items: center;
  background: #afd275;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: 200px;
  height: 100vh;
  justify-content: center;
  padding: 1rem;
}

.element {
  align-items: center;
  background: linear-gradient(-45deg, rgba(0,0,0,0.22), rgba(255,255,255,0.25));
  box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
   -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  display: flex;
  height: 200px;
  justify-content: center;
  width: 200px;
}

.element-1 {
  background: #afd275;
}

.element-2 {
  background: linear-gradient(-45deg, rgba(0,0,0,0.22), rgba(255,255,255,0.25));
}

.element-3 {
  background: linear-gradient(135deg, rgba(0,0,0,0.22), rgba(255,255,255,0.25));
}

@media (min-width: 700px) {
  body {
    grid-template-columns: repeat(3, 200px);
  }
}

<body>
<div >Flat</div>
<div >Convex</div>
<div >Concave</div>
</body>