Neumorphism Container with Elementor Pro & CSS

(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)

Requirements –

1 – Elementor Pro

Create Neumorphism Containers with Elementor Pro & CSS

We cannot simply add inverted border radius as it’s not possible with CSS but instead we use different methods to give illusion of inverted border radius. Below are different methods that can be used to create inverted border-radius. We simply create the curved shape and place it at appropriate location which leads to illusion of inverted border-radius.

				
					/*Flat Neomorphism Container*/

.flat-container {
    
    box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
   -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
    
}

/*Convex Neomorphism Container*/

.convex-container {
    
    box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
   -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
    background:linear-gradient(-45deg, rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.25));
    
}

/*Concave Neomorphism Container*/

.concave-container {
    
    box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
   -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
   background:linear-gradient(135deg, rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.25));
    
}

1. Flat Neumorphism with Border

Reminder: This method is the most common way to make inverted border radius but unfortunately, it does not work well with Elementor because we require both pseudo classes (before & after). Elementor allows us to use :after pseudo class and we can get one corner as inverted border radius but we cannot work with :before pseudo class as Elementor has already added :before pseudo class to all containers. These already added :before pseudo class is used by Elementor to add background image, overlay, videos in containers.
This method is for people who want to use coding or other page builders which allow to use both before and after pseudo class.
Below code adds illusion of inverted border-radius by creating a transparent circle and using the box shadow as the visible element.
Based on where you want to show the inverted border-radius, you will need to use appropriate left, right, top, bottom values along with appropriate box-shadow.
Make sure the parent div has overflow:hidden to remove the extra shadow.
In below code, “curved-container” is the CSS class used for the element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus.

				
					.neuromorphic-button {
    
    border: 5px solid transparent;
    border-radius: 10px;
    box-shadow: 8px 8px 20px 0px rgba(0,0,0,0.1),
    -8px -8px 20px 0px rgba(255, 255, 255, 0.5);
    
    transition: 
    box-shadow 0.1s ease,
    scale 0.1s ease;
  }

 .neuromorphic-button:hover {
     box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.1),
    -3px -3px 5px 0px rgba(255, 255, 255, 0.5);
    scale:0.99;
  }
 .neuromorphic-button:focus,
  .neuromorphic-button:active {
    outline: none;
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.1),
    -3px -3px 5px 0px rgba(255, 255, 255, 0.5),
    inset 20px 20px 20px -3px rgba(0,0,0,0.1),
    inset -12px -12px 20px 0px rgba(255, 255, 255, 0.3);
                
  }

2. Flat Neumorphism Container without Border

To increase the size of inverted border-radius, replace all “25” number with your desired size.
To change the color, add your desired hex code color in fill=”#YOURCOLORHERE”
Don’t forget to add position:absolute; and give appropriate top, right, left or bottom values. Refer above for values.

				
					.neuromorphic-button-no-border {
    
    border: 0px solid transparent;
    border-radius: 10px;
    box-shadow: 8px 8px 20px 0px rgba(0,0,0,0.1),
    -8px -8px 20px 0px rgba(255, 255, 255, 0.5);
    
    transition: 
    box-shadow 0.1s ease,
    scale 0.1s ease;
    ;
  }

 .neuromorphic-button-no-border:hover {
     box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.1),
    -3px -3px 5px 0px rgba(255, 255, 255, 0.5);
    scale:0.99;
  }
 .neuromorphic-button-no-border:focus,
  .neuromorphic-button-no-border:active {
    outline: none;
    box-shadow: 
    inset 3px 3px 3px 0px rgba(0,0,0,0.3),
    inset -3px -3px 3px 0px rgba(255, 255, 255, 0.3);
                
  }

3. Inflate Style Neumorphism Container

Using spacer is another alternative if you don’t want to work with code.
Simply make the size of spacer to your desired size by changing space value and custom width value. Make sure you switch it to ‘px’ when using values.
Now simply change the Box shadow horizontal and vertical values to half of your selected size. Simply using positive and negative values will change the position of inverted border-radius.
Add overflow hidden to the parent container if you don’t have Elementor Pro.
To even make it better add the overflow:hidden to Custom CSS (Requires Elementor Pro).

				
					.neuromorphic-button2 {
    
    border: 5px solid transparent;
    border-radius: 10px;
    box-shadow: 8px 8px 20px 0px rgba(0,0,0,0.1),
    -8px -8px 20px 0px rgba(255, 255, 255, 0.5),
    inset -10px -10px 20px -3px rgba(0,0,0,0.1),
    inset 12px 12px 20px 0px rgba(255, 255, 255, 0.3);
    
    transition: 
    box-shadow 0.1s ease,
    scale 0.1s ease;
  }

 .neuromorphic-button2:hover {
     box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.1),
    -3px -3px 5px 0px rgba(255, 255, 255, 0.5),
     inset -10px -10px 20px -3px rgba(0,0,0,0.1),
    inset 12px 12px 20px 0px rgba(255, 255, 255, 0.3);
    scale:0.99;
  }
 .neuromorphic-button2:focus,
  .neuromorphic-button2:active {
    outline: none;
    box-shadow:
     3px 3px 5px 0px rgba(0,0,0,0.1),
    -3px -3px 5px 0px rgba(255, 255, 255, 0.5),
    inset 20px 20px 20px -3px rgba(0,0,0,0.1),
    inset -12px -12px 20px 0px rgba(255, 255, 255, 0.3);
                
  }

4. Dark Flat Neumorphism Container

Using spacer is another alternative if you don’t want to work with code.
Simply make the size of spacer to your desired size by changing space value and custom width value. Make sure you switch it to ‘px’ when using values.
Now simply change the Box shadow horizontal and vertical values to half of your selected size. Simply using positive and negative values will change the position of inverted border-radius.
Add overflow hidden to the parent container if you don’t have Elementor Pro.
To even make it better add the overflow:hidden to Custom CSS (Requires Elementor Pro).

				
					.neuromorphic-dark-button {
    
    border: 5px solid transparent;
    border-radius: 10px;
    box-shadow:
    -4px -2px 20px rgba(195,200,205,0.01),
    4px 4px 18px rgba(0, 0, 0, 0.5);
    
    transition: 
    box-shadow 0.1s ease,
    scale 0.1s ease;
  }

 .neuromorphic-dark-button:hover {
     box-shadow: 
     -2px -1px 8px rgba(195,200,205,0.01), 
     2px 2px 9px rgba(0, 0, 0, 0.5);
    scale:0.99;
  }
 .neuromorphic-dark-button:focus,
  .neuromorphic-dark-button:active {
    outline: none;
        box-shadow:
        -2px -1px 8px rgba(195,200,205,0.01), 
     2px 2px 9px rgba(0, 0, 0, 0.5),
        inset 0px 0px 20px 15px rgba(0,0,0,0.1);
                
  }

5. Concave/Convex Neumorphism Container

Using spacer is another alternative if you don’t want to work with code.
Simply make the size of spacer to your desired size by changing space value and custom width value. Make sure you switch it to ‘px’ when using values.
Now simply change the Box shadow horizontal and vertical values to half of your selected size. Simply using positive and negative values will change the position of inverted border-radius.
Add overflow hidden to the parent container if you don’t have Elementor Pro.
To even make it better add the overflow:hidden to Custom CSS (Requires Elementor Pro).

				
					.neuromorphic-button3 {
    
    background:linear-gradient(-45deg, rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.25));
    box-shadow: 8px 8px 20px 0px rgba(0,0,0,0.3),
    -8px -8px 20px 0px rgba(255, 255, 255, 0.3);
    transition: 
    box-shadow 0.1s ease,
    scale 0.1s ease;
  }

 .neuromorphic-button3:hover {
     box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3),
    -3px -3px 5px 0px rgba(255, 255, 255, 0.3);
    scale:0.99;
    
  }
 .neuromorphic-button3:focus,
  .neuromorphic-button3:active {
    outline: none;
     background:linear-gradient(135deg, rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.25));
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3),
    -3px -3px 5px 0px rgba(255, 255, 255, 0.3);
   
                
  }