About this snippet

Create a soft UI button with the neumorphism design trend using CSS. This effect uses shadows to make elements look like they are extruded from the background.

Size
1.1 KB
Uses
HTML, CSS
Loads
Nothing external
Views
562

Collections

Related snippets

<div class="neumorphic-container">
  <button class="neumorphic-button">Neumorphic Button</button>
</div>
body {
  background-color: #e0e5ec;
}
.neumorphic-container {
  background-color: #e0e5ec;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Arial', sans-serif;
}
.neumorphic-button {
  padding: 20px 40px;
  font-size: 18px;
  background-color: #e0e5ec;
  border: none;
  border-radius: 20px;
  color: #555;
  cursor: pointer;
  outline: none;
  box-shadow: 
    -7px -7px 20px 0px #fff9,
    -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002,
    4px 4px 5px 0px #0001,
    inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001,
    inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001;
  transition: box-shadow 0.3s ease-in-out;
}

.neumorphic-button:active {
  box-shadow: 
    0px 0px 0px 0px #fff9,
    0px 0px 0px 0px #fff9,
    0px 0px 0px 0px #0001,
    0px 0px 0px 0px #0001,
    inset -7px -7px 20px 0px #fff9,
    inset -4px -4px 5px 0px #fff9,
    inset 7px 7px 20px 0px #0003,
    inset 4px 4px 5px 0px #0001;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save