Glassmorphism is a cool UI design trend that allows you to create an amazing glass illusion in your app works. It can also provide a frost-like effect that feels like a blurry or floating image. This creates a visual layer in your user interface that allows you to draw attention to what you intend to emphasize.

Here is an example of a portfolio website title with a glass shape effect.

photo

Glassmorphism is achieved by creating a contrast of translucent backgrounds for objects positioned above a set background.

This guide will discuss glassMorphism concepts and step-by-step instructions on how to achieve this effect in React applications. We’ll implement a simple to-do application and use the glass shape effect on the form and each task card.

The premise condition

In order to understand this passage, you should have the following conditions.

  • Have working knowledge of React
  • Working knowledge of Material UI
  • You have Node.js installed on your computer.

Set up a React application using the Create React App

Create React App is a tool provided by the React team that allows you to launch a single page application in React.

Navigate to the project directory of your choice and initialize the React application with TypeScript and the following command.

npx creat-react-app react-glassmorphism-app --template typescript

Copy the code

Then go to the newly created React application directory.

cd react-glassmorphism-app

Copy the code

Start the React development server and check that the bootstrap template is working.

npm run start 

Copy the code

On your default browser, the BoilerPlate React page will be loaded [http://localhost:3000/](http://localhost:3000/) to show that everything is in order.

Implement the to-do list

To create a new task, we need to set up a form that lets the user add the details of the task and then add it to the to-do list. Navigate to SRC/app.tsx and implement a to-do list, as shown in the figure below.

Import app.css at the top. We’ll use this file to add CSS classes to style to-do forms and task cards.

import './App.css';

Copy the code

Edit the render function and add a form with the title and Description fields, as shown below.

<div className="todos-container"> <form className="form"> <div className="form-group"> <label htmlFor="title">Title</label> <input type="text" id="title" placeholder="Enter todo's title" name="title" required /> </div> <div className="form-group"> <label htmlFor="description">Description</label> <textarea id="description" placeholder="Describe the todo" name="description" required /> </div> <div className="form-group"> <button type="submit"  class="form-submit-btn"> Add todo </button> </div> </form> </div>Copy the code

This will create a Todos-Container with a simple table. The form will have a field title for adding a task title, a field Description for adding a task description, and a button Submit for submitting details.

The next step is to style the form. Navigate to the SRC/app.css file and add the following styles.

Set the style for the todos-Container class.

.todos-container{
    /* Entire page width */
    width:100%;
    /* Entire page height */
    height:100vh;
    /* Responsive layout */
    display:flex;
    /* Display on top of the other */
    flex-direction: column; 
    /* Display horizontally at the center */ 
    align-items: center;
    /* Smooth transition to bottom right with different colors */
    background-image: linear-gradient(to bottom right, #fc0345,#fc03b1,#4a03fc);
    /* To cover the entire screen */
    background-size:cover;
    /* Image position */
    background-position:center;
    /* To not repeat the image beyond it's scale */
    background-repeat:no-repeat;
}

Copy the code

Style the Form class.

.form{
    /** Sizeable width for the form **/
    width:400px;
    /** Sizeable height for the form **/
    height:300px;
    /** Black color with opacity **/
    background-color:rgba(0,0,0,0.5);
    /** Responsive layout **/
    display:flex;
    /** One element on top of the other **/
    flex-direction:column;
    /** Vertically at the center **/
    justify-content: center;
    /** Smooth corners **/
    border-radius:10px;
    /** Top, bottom, right, and left spacing between form and it's content **/
    padding:20px;
    /** Spacing from the top **/
    margin-top:10px;
}

Copy the code

Style the form-group class.

.form-group{
    /** Bottom space between one form-group and the other **/
    margin-bottom:20px;
    /** Responsive layout **/
    display: flex;
    /** One element on top of the other **/
    flex-direction: column;
}

Copy the code

Is the label style.

.form-group label{
    /** Medium font size **/
    font-size:16px;
    /** Visible color **/
    color:white;
    /** Bottom space between it and the input form **/
    margin-bottom:5px;
}

Copy the code

Style the form input.

.form-group input[type="text"],textarea{
    /** Size-able width of the input **/
    width:90%; 
    /** Size-able height of the input **/
    height:40px; 
    /** Smooth corners on all edges **/
    border-radius:5px;
    /** No line sorrounding the input **/ 
    border:none;
    /** Top, right, bottom, right spacing to where content starts **/
    padding:10px;
    /** Medium font **/
    font-size:16px;
    /** Visible color **/
    color:white;
    /** Dark background with some opacity **/
    background-color:rgba(0,0,0,0.5); 
}

Copy the code

Style the Submit form button.

.form-group .form-submit-btn{
    /** Take up the entire available width **/
    width:100%; 
    /** Sizeable height **/
    height:40px; 
    /** Smooth corners at all edges **/
    border-radius:5px;
    /** No line on the outline **/
    border:none;
    /** Greyish color **/
    background-color:rgba(255,255,255,0.5);
    /** Color of text **/
    color:black;
    /** Medium sized font **/
    font-size:16px
    /** Display a pointer when mouse is over it **/
    cursor:pointer;
}

Copy the code

Add a glass effect to the React application

To add a glass shape to our form, we will add the following styles to our.form class.

A linear gradient serves as the background image.

/** Smooth transition to the bottom from a greyish to a less greyish color **/ background-image:linear-gradient(to The bottom right, rgba (255255255,0.2), rgba (255255255, 0));Copy the code

A background filter.

/** A blur effect behind the form **/
backdrop-filter: "blur(10px)"; 

Copy the code

A box shadow.

/** Thick box shadow with a greyish background on the right, bottom, with a blurred shadow **/ box-shadow: 10 px 10 px 10 px rgba (30,30,30,0.5);Copy the code

After adding these styles, refresh the [http://localhost:3000/](http://localhost:3000/) TAB you opened earlier. The form should apply the glass shape effect below.

Make the table responsive

To make the form responsive, we will take the user’s input and store it in a state for our component. Navigate to the SRC/app.tsx file and do the following.

Import the useState hook from React.

import {useState} from 'react';

Copy the code

Define an interface for to-do items. An interface describes the structure of each task in the to-do list.

interface Todo {
    title: string;
    description: string;
}

Copy the code

Define the state.

// our saved todos starting with an empty string
const [todos, setTodos] = useState([] as Todo[]); 
// title of a todo starting as an empty string
const [title, setTitle] = useState('' as string); 
// description of a todo starting as an empty string
const [description, setDescription] = useState('' as string); 

Copy the code

Add an onChange event for the title field. This event takes the user’s input and saves it on the state of the current title. Also, set the value of the title to the current title on the state.

<input type="text" onChange={e => setTitle(e.target.value)} id="title" placeholder="Enter todo's title" name="title" value={title} required/>

Copy the code

Add an onChange event for the description field. This event takes the user’s input and stores it in the currently described state. Also, set the value of description to the description in the current state.

<textarea id="description" onChange={e => setDescription(e.target.value) } placeholder="Describe the todo" name="description" value={description} required />

Copy the code

Build a function to handle the form submission event.

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    // Prevent executing the default form submission event
    e.preventDefault();
    // Structure our todo from the current state
    const todo = {
    title,
    description,
    };
    // Add the todo to the state
    setTodos([...todos, todo]);
    // Clean the title state
    setTitle('');
    // Clean the description state
    setDescription('');
}; 

Copy the code

Finally, wire the function to the form.

<form className="form" onSubmit={handleSubmit}>

Copy the code

Displays a quest card with a glass form effect

After saving the tasks, we need to show them to the user. We will check our state to see if there are any saved tasks. If there are, we map through them. If not, we display a message saying we have no saved tasks.

After the form, we’ll add a condition to check if we have a saved task. If tasks are already saved, we loop through them.

{
    todos.length > 0 ? (
        <ul className="todos-list">
        {
          todos.map((todo, index) => (
            <li key={index} className="todo-item">
              <h3>{todo.title}</h3>
              <p>{todo.description}</p>
            </li>
          ))            
        }
      </ul>
    ) : (
        <p className="no-todos">No todos yet</p>
    )
}

Copy the code

At first, you’ll see the text No todos’ ‘yet. However, if you fill out the form and submit it, you will be able to see your assignment. You should also note that when you refresh the page, you won’t see the tasks you saved earlier because they are stored on the state.

Let’s add some styles to the No-Todos class to make it more obvious. Navigate to the SRC/app.css file and implement the following styles.

.no-todos{
    /** White text color **/
    color:white
    /** Medium font **/
    font-size: 20px;
    /** Bold style **/
    font-weight: bold;
}

Copy the code

Style the todos-List class.

.todos-list{
    /** Top and bottom outer spacing of 10px and centered **/
    margin: 10px auto;
    /** No inner spacing **/
    padding:0px; 
    /** No list style **/
    list-style:none;
    /** Half of the parent's width **/
    width: 50%;  
}

Copy the code

Style the todo-item class.

.todo-item{/** Black with opacity **/ background-color:rgba(0,0,0,0.5); /** Smooth transition from a greyish to a less greyish color **/ background-image:linear-gradient(to bottom right, Rgba (255255255,0.2), rgba (255255255, 0)); /* A blur effect behind the card */ backdrop-filter: "blur(10px)"; /** A think greyish shadow for the card to the right, bottom with a blurred shadow **/ box-shadow: 10 px 10 px 10 px rgba (30,30,30,0.5); /** Inner spacing between elements **/ padding: 10px; /** Smooth corners on all edges **/ border-radius:20px; /** Bottom spacing **/ margin-bottom:10px; }Copy the code

Make sure your development server is still running and your page should look something like this.

conclusion

The general glassmorphism idea is to have a translucent blur on an object, giving the impression of frosted glass. It mainly uses bahy-filter, with these vague attributes. Other CSS properties, such as color, border radius, border, and shadow, can be modified according to your application preferences. Glass shape effects complement individual design components such as content cards, navigation bars, and sidebars.

I hope you found this article helpful!