How to Create Neobrutalism Sign-up Form Using HTML and CSS Only


By Faraz -

In this tutorial, you will learn how to create a Neobrutalism style sign-up form using HTML and CSS only. Build a stylish and minimalistic form that fits perfectly with your website's design.

how to create neobrutalism sign-up form using html and css only.jpg

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Preview
  5. Conclusion

Neubrutalism, or Neobrutalism as some call it, is a mix of standard Brutalism in web design and more modern standards of typography, illustration, and animation. In this tutorial, we'll create a signup form in neobrutalism style using HTML and CSS.

Before we dive into the tutorial, let's discuss what Neobrutalism web design is and why we need a sign-up form for our website. Neobrutalism is a web design style that embraces a raw and minimalistic approach, with a touch of modern elements. It's characterized by the use of monochromatic colors, simple typography, and bold and large-scale graphics. A sign-up form is a crucial element of a website, allowing visitors to register for a service or subscribe to a newsletter.

Watch full tutorial on my YouTube Channel: Watch here.

Let's start making an amazing Neobrutalism Sign-up Form using HTML and Pure CSS step by step.

Join My Telegram Channel to Download the Project: Click Here


Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Neobrutalism Sign Up Form.

After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

Step 2 (CSS Code):

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create neobrutalism effect. We will also add some padding and margin properties to ensure that everything looks correct.

This will give our neobrutalism sign up form an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

@import url(',500,600,700,800,900');

    margin: 0;
    padding: 0;

    font-family: 'Poppins', sans-serif;
    height: 100vh;
    width: 100vw;
    background: #7b4397;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    height: auto;
    width: auto;
    border-radius: 20px;
    box-shadow: 30px 35px 2px #52206b;

    color: #7b4397;
    font-weight: 900;
    font-size: 1.5em;
    margin-top: 20px;

    font-weight: 600;
    margin: 5px 0;

    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin: 20px;

    outline: none;
    border: 2px solid #000;
    box-shadow: 3px 4px 0px 1px #000;
    width: 290px;
    padding: 12px 10px;
    border-radius: 4px;
    font-size: 15px;

.form_style:focus, .btn:focus{
    transform: translateY(4px);
    box-shadow: 1px 2px 0px 0px #000;

    padding: 15px;
    margin: 30px 0px;
    width: 310px;
    font-size: 15px;
    background: #7b4397;
    border-radius: 30px;
    font-weight: 800;
    box-shadow: 5px 5px 0px 0px #000;

    margin: 20px 0px;

    font-weight: 800;

Final Output:

how to create neobrutalism sign-up form using html and css only.gif


In this tutorial, you've learned how to create a Neobrutalism style sign-up form using HTML and CSS only. You've learned how to create the HTML structure of the form, style it using CSS, and implement form validation. With these skills, you can create a stylish and simple sign-up form that fits perfectly with your website's design. Keep practicing and experimenting with different designs to create a unique and modern sign-up form.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Faraz 😊

End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post