DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Create a neomorphism effect in CSS !
Ustariz Enzo
Ustariz Enzo

Posted on • Updated on

Create a neomorphism effect in CSS !

Hey fellow creators,

Let's learn how to create this awesome neomorphism effect in CSS that's raging at the moment !

If you prefer to watch the video version, it's right here :

1. Create a button in HTML.

Create a button in your body with a fire emoticon and a class called "btn".

    <body>
         <button class="btn">πŸš€</button>
    </body>
Enter fullscreen mode Exit fullscreen mode

2. Style the button.

Make sure to give the button the same colour as the colour of its background in order to blend in. Then, center the button in the middle of the page as well as center the emoticon inside the button.

body{
    background-color: #333333;
}

.btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    width: 200px;
    height: 200px;
    font-size: 60px;
    outline: none;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: #333333;
}
Enter fullscreen mode Exit fullscreen mode

For now, the button blends into the background, so we'll need to remedy that.

3. Add some depth !

Now it's time to add some depth ! Since we cannot see the button right now, we'll use box-shadow to create this neomorphism interface.

In order to do that, we'll add some lighter shadows to the left of the button (second line) and some darker shadows to the right (first line), for instance here with :

.btn{
    box-shadow: 5px 5px 10px #202020,
    -5px -5px 10px #464646
}
Enter fullscreen mode Exit fullscreen mode

Neomorphism button
Make sure the button is still accessible.

But here you are! You've created your very first neomorphic button. Well done πŸ‘

Grab the source code is here : https://www.ui-delivery.com/Neomorphism

Come and take a look at my fancy Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon for more easy-to-follow tutorials !

Enzo.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.