Neumorphism Button Styles in CSS
Published: 2023-08-09 17:39:56

We made 11 neumophism button styles in css for your next project

### Watch Tutorial
Don't miss the amazing video we've embedded in this post! Click the play button to be inspired 


{% youtube pnwZIyXZHwA  %}

---

### 1. 

Source Code

```css
.neu {
  width: 300px;
  height: 300px;
  background: #eef0f4;
  border-radius: 100%;
  box-shadow: inset 9.91px 9.91px 15px #d9dade, inset -9.91px -9.91px 15px #fff;
}
```

![Neumorphism Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i830e1qb9d9gwbjohqti.png)


---

### 2. 

Source Code

```css
.neu {
  width: 300px;
  height: 300px;
  background: linear-gradient(145deg, #c1c3c6, #fff);
  border-radius: 100%;
  box-shadow: inset 9.91px 9.91px 15px #d9dade, inset -9.91px -9.91px 15px #ffff;
}


```
![Neumorphism Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/739utf1q5vljysh8hfdj.png)


---

### 3. 

Source Code

```css
.neu {
  width: 300px;
  height: 300px;
  background: linear-gradient(145deg, #fff, #c1c3c6);
  border-radius: 100%;
  box-shadow: 9.91px 9.91px 15px #d9dade, -9.91px -9.91px 15px #fff;
}

```

![Neumorphism Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9npkwcst2k8l39610sv.png)


---

### 4. 

Source Code

```css
.neu {
  width: 300px;
  height: 300px;
  background: linear-gradient(145deg, #cacccf, #fff);
  border-radius: 100%;
  box-shadow: 9.91px 9.91px 15px #d9dade, -9.91px -9.91px 15px #fff;
}

```

![Neumorphism Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcddlylyzm1k5n4n78c2.png)


---

### 5. 

Source Code

```css
.neu {
  width: 300px;
  height: 300px;
  background: #eef0f4;
  border-radius: 15%;
  box-shadow: inset 9.91px 9.91px 15px #d9dade, inset -9.91px -9.91px 15px #fff;
}

```

![Neumorphism Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mlgrl1wky1rcpr5tizf.png)


---

### 6.

Source Code

```css
 .neu {
  width: 300px;
  height: 300px;
  background: linear-gradient(145deg, #cdcfd2, #fff);
  border-radius: 15%;
  box-shadow: inset 9.91px 9.91px 15px #d9dade, inset -9.91px -9.91px 15px #fff;
}

```


![Neumorphism Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnq9c07yiqlnzksk0mwa.png)


---

### 7. 


 Source Code

```css
.neu {
  width: 300px;
  height: 300px;
  background: linear-gradient(145deg, #fff, #c4c6c9);
  border-radius: 15%;
  box-shadow: 9.91px 9.91px 15px #d9dade, -9.91px -9.91px 15px #fff;
}

```


![Neumorphism Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2114boy0fkcit5y8o8rl.png)




---

### 8. 

Source Code

```css
.neu {
  width: 300px;
  height: 300px;
  background: linear-gradient(145deg, #cacccf, #fff);
  border-radius: 15%;
  box-shadow: 9.91px 9.91px 15px #d9dade, -9.91px -9.91px 15px #fff;
}

``` 


![Neumorphism Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjyy02qhd90wpxaeohvv.png)


---

### 9. 

[Source Code](https://youtu.be/pnwZIyXZHwA)


![Neumorphism Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09scju5nqf7o99rdexuq.png)


---

### 10. 

[Source Code](https://youtu.be/pnwZIyXZHwA)

![Neumorphism Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/turhruygb5lolb27nd2u.png)



---

### 11. 

[Source Code](https://youtu.be/pnwZIyXZHwA)

![Neumorphism Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d06y6b9qb2njhlmnujok.png)


---

---

### Latest Post

{% link https://dev.to/jon_snow789/awesome-list-of-free-css-generator-293k %}

---
---


Thanks for Reading ❤️! Check my website [Demo coding](https://democoding.in/) for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!

Don't forget to subscribe to our channel : [Demo code](https://www.youtube.com/@democode)