Responsive Pricing Table with Neumorphism Effect

Today we are going to create a responsive pricing table with neumorphism effect. A pricing page is a dedicated landing page that outlines the various pricing options available for your products and services. It includes a detailed overview of the benefits and features associated with each tier. Today we are going to build a Responsive Pricing Table with Neumorphism Effect on it .

It is, therefore, essential to grasp the significance of pricing and to learn how to price a product effectively. Here is how we can build a simple yet beautiful pricing page with with a HTML and CSS in Visual studio code (VSCODE).

If you are starting to code and do not have code editor, Visual Studio code is the best code editor .

Steps-

  • First open up the Vscode editor and open up a folder or create one where you want to place HTML , CSS3 files .
  • Now after you have done that , create a index.html and style.css file in Vscode by pressing the new file icon on the left side navigation bar .
  • Now lets begin to code.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Neumorphic Pricing Plans</title>
</head>

<body>

    <section class="plans__container">
        <div class="plans">
            <div class="plansHero">
                <h1 class="plansHero__title">Simple, Transparent Pricing</h1>
                <p class="plansHero__subtitle">Choose a plan that works for you</p>
            </div>

            <div class="planItem__container">
                <!-- Free Plan -->
                <div class="planItem planItem--free neumorphic">
                    <div class="card">
                        <div class="card__header">
                            <div class="card__icon symbol symbol--rounded neumorphic"></div>
                            <h2>Free</h2>
                        </div>
                        <div class="card__desc">Basic plan with limited features</div>
                    </div>
                    <div class="price">$0<span>/ month</span></div>
                    <ul class="featureList">
                        <li>2 links</li>
                        <li>Own analytics platform</li>
                        <li class="disabled">Chat support</li>
                        <li class="disabled">Mobile application</li>
                        <li class="disabled">Unlimited users</li>
                    </ul>
                    <button class="button button--neumorphic">Get Started</button>
                </div>

                <!-- Pro Plan -->
                <div class="planItem planItem--pro neumorphic">
                    <div class="card">
                        <div class="card__header">
                            <div class="card__icon symbol neumorphic"></div>
                            <h2>Pro</h2>
                            <div class="card__label label neumorphic">Best Value</div>
                        </div>
                        <div class="card__desc">Ideal for professionals with advanced features</div>
                    </div>
                    <div class="price">$18<span>/ month</span></div>
                    <ul class="featureList">
                        <li>Unlimited links</li>
                        <li>Own analytics platform</li>
                        <li>Chat support</li>
                        <li>Mobile application</li>
                        <li class="disabled">Unlimited users</li>
                    </ul>
                    <button class="button button--neumorphic">Get Started</button>
                </div>

                <!-- Enterprise Plan -->
                <div class="planItem planItem--entp neumorphic">
                    <div class="card">
                        <div class="card__header">
                            <div class="card__icon symbol neumorphic"></div>
                            <h2>Enterprise</h2>
                        </div>
                        <div class="card__desc">Custom solutions for large-scale businesses</div>
                    </div>
                    <div class="price">Let's Talk</div>
                    <ul class="featureList">
                        <li>Unlimited links</li>
                        <li>Custom analytics platform</li>
                        <li>24/7 support</li>
                        <li>Mobile application</li>
                        <li>Unlimited users</li>
                    </ul>
                    <button class="button button--neumorphic">Get Started</button>
                </div>
            </div>
        </div>
    </section>

</body>

</html>


:root {
    --bgColor: #e0e0e0;
    --textColor: #333;
    --accentColor: #ea4c89;
    --disabledColor: #b1b8c9;
    --boxShadowDark: #bebebe;
    --boxShadowLight: #ffffff;
}

body {
    background-color: var(--bgColor);
    font-family: 'Inter', sans-serif;
}

.plans__container {
    padding: 2rem 0;
}

.plansHero {
    text-align: center;
    padding: 3rem 0;
}

.plansHero__title {
    font-size: 2.5rem;
    color: var(--textColor);
}

.plansHero__subtitle {
    font-size: 1.25rem;
    color: var(--textColor);
}

.planItem {
    background-color: var(--bgColor);
    border-radius: 50px;
    box-shadow: 20px 20px 60px var(--boxShadowDark),
                -20px -20px 60px var(--boxShadowLight);
    padding: 2rem;
    width: 100%;
    max-width: 350px;
    margin: auto;
    text-align: center;
}

.planItem__container {
    display: flex;
    justify-content: space-around;
    gap: 2rem;
    flex-wrap: wrap;
}

.card h2 {
    font-size: 1.75rem;
    color: var(--textColor);
}

.price {
    font-size: 2.5rem;
    color: var(--accentColor);
}

.featureList {
    padding: 0;
    list-style-type: none;
}

.featureList li {
    font-size: 1.1rem;
    color: var(--textColor);
    margin: 1rem 0;
}

.featureList li.disabled {
    color: var(--disabledColor);
}

.button {
    background-color: var(--bgColor);
    border-radius: 50px;
    box-shadow: 10px 10px 30px var(--boxShadowDark),
                -10px -10px 30px var(--boxShadowLight);
    padding: 1rem 2rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accentColor);
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.button:hover {
    transform: translateY(-5px);
    box-shadow: 15px 15px 40px var(--boxShadowDark),
                -15px -15px 40px var(--boxShadowLight);
}

This is the final result after applying the CSS to the Html structure.

Neumorphism CSS Updates

Here are the key styles for applying neumorphism:

  • We’ll replace the card background with a neutral, lighter color (#e0e0e0).
  • Apply subtle shadows with your box-shadow specifications.
  • Update buttons, pricing plans, and feature lists to match the neumorphic design.

The box shadow effect used is :

border-radius: 50px;
background: #e0e0e0;
box-shadow: 20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;

Explanation

  1. Neumorphism Background & Shadows: Each planItem has a light background with a smooth, raised effect. The box-shadow creates the soft 3D effect.
  2. Buttons: Neumorphic buttons have soft, inset shadows with a hover effect to enhance the interaction.
  3. Bright Colors: The accent color (#ea4c89) is used for pricing, buttons, and emphasis to contrast against the neutral background.
  4. Typography & Spacing: Clean, spacious layout for easy readability and modern aesthetics.

This approach should create a fresh, neumorphic pricing page that’s both functional and visually appealing!

Conclusion-

In conclusion, building a pricing page with HTML and CSS provides an excellent opportunity to develop essential web development skills, from structuring layouts to applying responsive designs.

Through this process, you’ll learn how to style components, manage layouts using modern CSS techniques, and create visually appealing, user-friendly designs. This project not only enhances your technical knowledge but also sharpens your ability to create scalable and maintainable web pages.

Thankyou for Coding with US. Do check out our Buttons, Forms , Pricing Page etc.