[data-swatch]::before {
  background-color: var(--swatch-color);
  background-image: var(--swatch-image);
}

[data-swatch="Black"] {--swatch-image: linear-gradient(to bottom, #00000 0%, #363232 125%); }[data-swatch="Beige"] { --swatch-color:#f5f5dc}[data-swatch="Blue"] {--swatch-image: linear-gradient(to bottom, #039 0%, #9cf 125%); }[data-swatch="Purple"] {--swatch-image: linear-gradient(to bottom, #60c 0%, #ccf 125%); }[data-swatch="Red"] {--swatch-image: linear-gradient(to bottom, #c00 0%, #efbfda 125%); }[data-swatch="Brown"] {--swatch-image: linear-gradient(to bottom, #3e1f14 0%, #c90 125%); }[data-swatch="Green"] {--swatch-image: linear-gradient(to bottom, #030 0%, #cfc 125%); }[data-swatch="Gray/Silver"] {--swatch-image: linear-gradient(to bottom, #3a393a 0%, #ccc 125%); }[data-swatch="Multi-Colored"] {--swatch-image: linear-gradient(to bottom, #ff0000 0%, #ffff00 66%, #0000ff 125%); }[data-swatch="Orange"] {--swatch-image: linear-gradient(to bottom, #f90 0%, #fc9 125%); }[data-swatch="White/Cream"] {--swatch-image: linear-gradient(to bottom, #fff 0%, #ffebd2 125%); }[data-swatch="Yellow/Gold"] {--swatch-image: linear-gradient(to bottom, #fc0 0%, #ffc 125%); }[data-swatch="Clear"] { --swatch-color:#ffffff}