紫色毛玻璃卡片

01.card {02  --white: hsl(0, 0%, 100%);03  --black: hsl(240, 15%, 9%);04  --paragraph: hsl(0, 0%, 83%);05  --line: hsl(240, 9%, 17%);06  --primary: hsl(266, 92%, 58%);07 08  position: relative;09 10  display: flex;11  flex-direction: column;12  gap: 1rem;13 14  padding: 1rem;15  width: 19rem;16  background-color: hsla(240, 15%, 9%, 1);17  background-image: radial-gradient(18      at 88% 40%,19      hsla(240, 15%, 9%, 1) 0px,20      transparent 85%21    ),22    radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),23    radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),24    radial-gradient(at 0% 64%, hsla(263, 93%, 56%, 1) 0px, transparent 85%),25    radial-gradient(at 41% 94%, hsla(284, 100%, 84%, 1) 0px, transparent 85%),26    radial-gradient(at 100% 99%, hsla(306, 100%, 57%, 1) 0px, transparent 85%);27 28  border-radius: 1rem;29  box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;30}31 32.card .card__border {33  overflow: hidden;34  pointer-events: none;35 36  position: absolute;37  z-index: -10;38  top: 50%;39  left: 50%;40  transform: translate(-50%, -50%);41 42  width: calc(100% + 2px);43  height: calc(100% + 2px);44  background-image: linear-gradient(45    0deg,46    hsl(0, 0%, 100%) -50%,47    hsl(0, 0%, 40%) 100%48  );49 50  border-radius: 1rem;51}52 53.card .card__border::before {54  content: "";55  pointer-events: none;56 57  position: fixed;58  z-index: 200;59  top: 50%;60  left: 50%;61  transform: translate(-50%, -50%), rotate(0deg);62  transform-origin: left;63 64  width: 200%;65  height: 10rem;66  background-image: linear-gradient(67    0deg,68    hsla(0, 0%, 100%, 0) 0%,69    hsl(277, 95%, 60%) 40%,70    hsl(277, 95%, 60%) 60%,71    hsla(0, 0%, 40%, 0) 100%72  );73 74  animation: rotate 8s linear infinite;75}76 77@keyframes rotate {78  to {79    transform: rotate(360deg);80  }81}82 83.card .card_title__container .card_title {84  font-size: 1rem;85  color: var(--white);86}87 88.card .card_title__container .card_paragraph {89  margin-top: 0.25rem;90  width: 65%;91 92  font-size: 0.5rem;93  color: var(--paragraph);94}95 96.card .line {97  width: 100%;98  height: 0.1rem;99  background-color: var(--line);100 101  border: none;102}103 104.card .card__list {105  display: flex;106  flex-direction: column;107  gap: 0.5rem;108}109 110.card .card__list .card__list_item {111  display: flex;112  align-items: center;113  gap: 0.5rem;114}115 116.card .card__list .card__list_item .check {117  display: flex;118  justify-content: center;119  align-items: center;120 121  width: 1rem;122  height: 1rem;123  background-color: var(--primary);124 125  border-radius: 50%;126}127 128.card .card__list .card__list_item .check .check_svg {129  width: 0.75rem;130  height: 0.75rem;131 132  fill: var(--black);133}134 135.card .card__list .card__list_item .list_text {136  font-size: 0.75rem;137  color: var(--white);138}139 140.card .button {141  cursor: pointer;142 143  padding: 0.5rem;144  width: 100%;145  background-image: linear-gradient(146    0deg,147    rgba(94, 58, 238, 1) 0%,148    rgba(197, 107, 240, 1) 100%149  );150 151  font-size: 0.75rem;152  color: var(--white);153 154  border: 0;155  border-radius: 9999px;156  box-shadow: inset 0 -2px 25px -4px var(--white);157}