Skip to main content

Simple Neumorphic Box Design Using Html and Css

Simple Neumorphic Box Design Using Html and Css

Neumorphic design is a modern web and app design trend that combines minimalism with soft, realistic 3D effects. It creates interfaces that feel tangible and interactive through the use of soft shadows, subtle gradients, and smooth edges. This guide will walk you through the fundamentals of creating a neumorphic design using HTML and CSS.

01. What is Neumorphic Design?

Neumorphism (or "Soft UI") is a visual style that blends skeuomorphism and flat design. It emphasizes:

  • Soft Shadows: Used to create depth.
  • Light and Dark Highlights: Simulate a three-dimensional effect.
  • Minimalistic Colors: Often monochromatic or subtle gradients.

It aims to mimic the appearance of physical objects while maintaining simplicity.

02. Setting Up the Environment

To begin, you’ll need:

Include the necessary fonts and meta tags in your HTML file.

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">

03. Creating the HTML Structure

We will use a simple structure to design a neumorphic box. Use the following HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <title>Simple Neumorphic Box Design Using Html and Css</title>
  <style>
</style>
</head>
<body>
  <center>
    <div class="box">Neumorphic Box Design</div>
  </center>
</body>
</html>

This structure includes a <div> element with the class box to style the neumorphic component.

04. Styling the Neumorphic Box

To create the signature soft 3D look, we’ll use CSS with properties like box-shadow and border-radius.

body {
  font-family: 'Poppins', 'Roboto', sans-serif;
  background-color: #f4f4f9;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  width: 300px;
  height: 150px;
  background-color: #e0e0e0;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2),
    -10px -10px 20px rgba(255, 255, 255, 0.7);
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  width: 300px;
  height: 150px;
  background-color: #e0e0e0;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2),
              -10px -10px 20px rgba(255, 255, 255, 0.7);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

Explanation of Key CSS Properties

  • box-shadow:

    • First shadow: Adds depth with a darker hue.
    • Second shadow: Simulates a light source, creating a realistic effect.

  • border-radius:

    • Rounds the corners for a smooth, modern look.

  • background-color:

    • Neutral tones, such as #e0e0e0, work best for Neumorphism.

Output:

Simple-Neumorphic-Box

05. Enhancing Neumorphism with Hover Effects

Interactivity hover effect to make the box appear pressed or raised:

.box:hover {
  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.2),
              inset -10px -10px 20px rgba(255, 255, 255, 0.7);
  transform: scale(0.98);
}

Output:

Simple-Neumorphic-Box-With-Hover-Effect

06. Neumorphic Design Tips

  • Use soft, neutral tones for the background and elements.
  • Ensure text contrasts well with the background for readability.
  • Avoid overusing Neumorphic elements to maintain performance.

07. Conclusion

Neumorphic design is a compelling trend that blends minimalism with realism. By combining subtle shadows, gradients, and smooth edges, you can create visually appealing interfaces. Experiment with the provided code to customize and adapt it to your projects.

08. References

Comments

Post a Comment