cardRate.css

.ssr,
.srp,
.sr,
.r {
  position: relative;
  -webkit-text-fill-color: transparent;
}

.ssr::after,
.srp::after,
.sr::after,
.r::after {
  z-index: -2;
  filter: blur(5px);
}

.ssr {
  background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
  background-clip: text;
}

.ssr::before,
.ssr::after,
.srp::before,
.srp::after,
.sr::before,
.sr::after,
.r::before,
.r::after {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  background: #fff;

}

.ssr::before,
.ssr::after {
  content: "SSR";
}

.ssr::before {
  z-index: -1;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #adadad, 0 -2px 0 #fff;
}

.srp {
  background: linear-gradient(315deg, gold, #B76E79, gold);
  background-clip: text;
}

.srp::before,
.srp::after {
  content: "SR+";
}

.srp::before {
  z-index: -1;
  text-shadow: 1px 0 0 #B76E79, -1px 0 0 #B76E79, 0 1px 0 #B76E79, 0 -1px 0 #B76E79;
}

.sr {
  background: linear-gradient(315deg, #ffec80, #d6b65c, #ffec80);
  background-clip: text;
}

.sr::before,
.sr::after {
  content: "SR";
}

.sr::before {
  z-index: -1;
  text-shadow: 1px 0 0 #754f1d, -1px 0 0 #754f1d, 0 1px 0 #754f1d, 0 -1px 0 #754f1d;
}

.n {
  position: relative;
  color: white;
  -webkit-text-stroke: 1px black;
}

.n::before,
.n::after {
  content: "N";
  position: absolute;
  top: 0;
  left: 0;
}


.r {
  background: linear-gradient(315deg, #e7e7e7, #bf95a8, #e7e7e7);
  background-clip: text;
}

.r::before,
.r::after {
  content: "R";
}

.r::before {
  z-index: -1;
  text-shadow: 1px 0 0 #bf95a8, -1px 0 0 #bf95a8, 0 1px 0 #bf95a8, 0 -1px 0 #bf95a8;
}