Create Star Rating System using HTML CSS

Looking to build an engaging star rating system using just HTML and CSS? This minimal yet interactive component lets users provide feedback visually with animated stars and expressive emoji feedback — all without a single line of JavaScript! Perfect for product reviews, feedback forms or any UI requiring a CSS star rating widget.

This post walks you through creating a CSS-only star rating system that not only animates on selection but also reflects emotion via emoji icons.

HTML Structure

Let’s begin by setting up the HTML structure for our star rating system. We use radio inputs for each star (from 1 to 5) and corresponding <label> elements with Font Awesome star icons. An additional <div> is included to display emoji reactions based on the selected rating.

<div class="main-container">
    <div class="rating-box">
        <input type="radio" id="rating-5" name="rating" hidden>
        <label for="rating-5" class="fas fa-star"></label>

        <input type="radio" id="rating-4" name="rating" hidden>
        <label for="rating-4" class="fas fa-star"></label>

        <input type="radio" id="rating-3" name="rating" hidden>
        <label for="rating-3" class="fas fa-star"></label>

        <input type="radio" id="rating-2" name="rating" hidden>
        <label for="rating-2" class="fas fa-star"></label>

        <input type="radio" id="rating-1" name="rating" hidden>
        <label for="rating-1" class="fas fa-star"></label>

        <div class="emojis"></div>
    </div>
</div>

• We create 5 radio buttons (1–5 stars), each hidden using the hidden attribute.
• The <label> elements use Font Awesome classes (fas fa-star) to render star icons.
• Clicking on a star selects the associated input and CSS handles the visual feedback.
• The .emojis container is where dynamic emoji feedback appears based on the selected rating.

This HTML setup is semantic, accessible and scalable, allowing the CSS star rating system to function smoothly without JavaScript.

Styling with CSS

Now, we bring the rating system to life with modern CSS. This includes flex layout, color transitions, star animations and conditional emoji rendering based on the selected star rating — all using pure CSS.

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.css');

.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 450px;
    min-height: 100vh;
}

.rating-box {
    gap: 20px;
    display: flex;
    position: relative;
    flex-direction: row-reverse;
}

.rating-box label {
    font-size: 45px;
    cursor: pointer;
}

input:not(:checked)~label {
    color: #eeeeee3a;
    transition: .3s;
}

input:checked~label {
    color: #ffa534;
    animation: filling-animation .7s forwards;
    filter: drop-shadow(0px 0px 10px #ffffff3f);
}

.emojis {
    width: 100%;
    height: fit-content;
    position: absolute;
    text-align: center;
    bottom: -80px;
    font-size: 40px;
    color: white;
    filter: drop-shadow(0px 0px 10px #ffffff3f);
}

#rating-1:checked~.emojis::after {
    content: '😞';
}

#rating-2:checked~.emojis::after {
    content: '😐';
}

#rating-3:checked~.emojis::after {
    content: '🙂';
}

#rating-4:checked~.emojis::after {
    content: '😃';
}

#rating-5:checked~.emojis::after {
    content: '😍';
}

@keyframes filling-animation {

    0%,
    100% {
        transform: scale(1);
    }

    30% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.2);
    }

}

• .main-container centers the content vertically and horizontally.
• .rating-box is laid out in reverse order to allow natural star selection (left to right).
• Unselected stars (input:not(:checked)) appear dimmed, while selected ones are highlighted in orange with a subtle glow.
• Each selected input reveals an emoji below using CSS ::after pseudo-elements for ratings 1 to 5.
• The @keyframes filling-animation adds a smooth pop effect to stars when selected, enhancing the user experience.

This CSS-only animation setup delivers a responsive, interactive and accessible star rating component without needing any JavaScript logic, making it fast and light for all modern web projects.

Conclusion

This interactive HTML CSS star rating system with emoji is an elegant solution for collecting feedback or adding ratings to your blog, product or web app. It’s fully customizable, scales perfectly across devices and uses Font Awesome icons combined with expressive emojis for an intuitive, fun user interaction.

Whether you’re building a review system, a testimonial slider or a feedback form, this CSS star rating component will instantly level up your UI/UX with minimal code.

Live Preview