Bootstrap 5: How to implement gradient color on tooltips?

I have faced some issues while I'm trying to gradient color on bootstrap 5 tooltips

CSS:

.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top .tooltip-arrow::before, 
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  top: -1px;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}

Live Example: https://codepen.io/themes4all/pen/NWabvad