Applies styles to HTML elements

HTML

<style>
.flat-gold {
  width: 200px;
  height: 200px;
  /* Using Oklch for a perceptually uniform yellow */
  background: oklch(85% 0.11 85);
}

.gradient-gold {
  width: 200px;
  height: 200px;
  background: linear-gradient(
    135deg,
    oklch(60% 0.1 65),   /* Dark, desaturated shadow (brownish) */
    oklch(85% 0.11 85) 45%, /* Rich mid-tone gold */
    oklch(98% 0.1 90) 50%, /* Sharp, bright highlight (almost white-yellow) */
    oklch(85% 0.11 85) 55%, /* Back to the mid-tone */
    oklch(70% 0.1 75)       /* Softer shadow on the other side */
  );
}

.conic-gold {
  width: 200px;
  height: 200px;
  border-radius: 50%; /* Often looks best on a circle */
  background: conic-gradient(
    from 90deg,
    #B38728, /* Darker Start */
    #FEE9A0, /* Bright Highlight */
    #D4AF37, /* Mid-tone */
    #FEE9A0, /* Another Highlight */
    #B38728  /* Darker End */
  );
}

.premium-gold {
  width: 200px;
  height: 200px;
  background-color: #B38728; /* Fallback color */
  background-image:
    /* Layer 1: Sharp highlight on top */
    linear-gradient(
      175deg,
      rgba(255, 253, 240, 0.6) 0%,
      rgba(255, 215, 0, 0.2) 40%,
      rgba(136, 96, 0, 0.5) 90%
    ),
    /* Layer 2: Base metallic gradient */
    linear-gradient(
      105deg,
      transparent 35%,
      #FEE9A0 48%,
      #D4AF37 52%,
      transparent 65%
    );
  border: 2px solid oklch(60% 0.1 65);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
}
</style>

<div class="flat-gold"></div>
<hr />
<div class="gradient-gold"></div>
<hr />
<div class="conic-gold"></div>
<hr />
<div class="premium-gold"></div>