I want to add a gradation to NPS.

@Haruki What do you mean gradiation to NPS?
Like this??

Hi @Haruki,

you can create a gradation between flat, modern and another unique layout by customizing the CSS.

Hope following codes will help:

/* Flat Layout */
body {
   background-color: #fff; /* Flat background color */
   font-family: Arial, sans-serif; /* Modern font */
}

/* Modern Layout */
.question-container.modern {
   border: 2px solid #3498db; /* Modern border style */
   border-radius: 5px; /* Rounded corners */
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); /* Drop shadow */
}

/* Classic Layout */
.question-container.classic {
   border: 1px solid #000; /* Classic border style */
   background-color: #f0f0f0; /* Classic background color */
   font-family: Times New Roman, serif; /* Classic font */
}

/* Elegant Layout */
.question-container.elegant {
   border: 2px solid #a9a9a9; /* Elegant border style */
   background-color: #f5f5f5; /* Elegant background color */
   font-family: 'Palatino Linotype', serif; /* Elegant font */
}

@Abhishek_U Is there an Elegant Layout???

@dxconnamnguyen 
thank you
Please by all means.

Yes, you can. Use add javascript on the bottom of the left bar

@Haruki I found the code. Change the QID or some color according to your
Here the JS for Flat, Classic & Modern layout

Qualtrics.SurveyEngine.addOnload(function() {
    for (var i = 0; i <= 11; i++) {
        if ((i >= 0 && i <= 7)) {
            jQuery("td:eq(" + i + ")").find('label').css("background-color", "#FF8E8E");
			jQuery("td:eq(" + i + ")").find('label span').css("color", "#ff0000");
        } else if ((i >= 8 && i <= 9)) {
          	jQuery("td:eq(" + i + ")").find('label').css("background-color", "#FFFAAE");
            jQuery("td:eq(" + i + ")").find('label span').css("color", "#ffe500");
        } else if ((i >= 10 && i <= 11)) {
            jQuery("td:eq(" + i + ")").find('label').css("background-color", "#AEFFB3");
            jQuery("td:eq(" + i + ")").find('label span').css("color", "#00ff00");
        }
    }
});

Here’s the CSS for Simple layout

#choice-display-QID1-0.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-1.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-2.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-3.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-4.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-5.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-6.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-7.choice-label {
    background: #ffe500 !important;
}
#choice-display-QID1-8.choice-label {
    background: #ffe500 !important;
}
#choice-display-QID1-9.choice-label {
    background: #00ff00 !important;
}
#choice-display-QID1-10.choice-label {
    background: #00ff00 !important;
}

This cover all 4 layout and can be used at the same time. I remember being unable to squeeze the simple layout in JS without disrupting other lay out so I have to bring it to CSS. If you want gradient use a color picker to change each choice invidually or just play with this to find your best.
Hope it helps

@dxconnamnguyen 
Thank you very much.
I was able to do everything except the modern style.
Modern is a radio button, so I may need to enter another code.

This is my modern look, the number have it’s color. If you want to change the button also then go for class: SingleAnswer, q-checked, q-focus

Could you share the code please. Thanks!