Metallic Conic Gradient

I had to design some buttons for my portfolio. I wanted to explore a metallic theme (because it looks good). I quickly prototyped some designs in Figma and came up with this version finally:

Hover over the button or check the Explode checkbox (if available) to view the exploded structure. The outer layer is a element styled with a conic gradient that mimics a metallic surface. Inside it, the inner layer is a

CSS

The goal is to make the gradient resemble shiny metal. To achieve this, we use three distinct color stops, with the second color contrasting the other two to ensure it stands out in both light and dark modes.

The gradient's origin is shifted toward the upper part of the button and rotated at an angle, creating the appearance of a metallic surface reflecting a beam of light.

@media (prefers-color-scheme: dark) {
  .outer {
    background: conic-gradient(
      from 17deg at 99% -157%,
      #000000 44%,
      #fffefd 49%,
      #000000 54%
    );
  }
 
  .inner {
    background-color: rgba(0, 0, 0, 0.763);
    color: white;
  }
}
/* for light mode */
@media (prefers-color-scheme: light) {
  .outer {
    border: 2px solid rgb(211, 211, 211);
    background: conic-gradient(
      from 17deg at 98% -154%,
      #575757 44%,
      #ffffff 49%,
      #373434 55%
    );
  }
 
  .inner {
    font-weight: bold;
    background-color: transparent;
    color: rgb(68, 68, 68);
  }
}

There are several other ways to create a metallic themed buttons, for example we can also use repeating gradients. I'm currently experimenting with various gradient techniques, so stay tuned for more insights in the next few blogs. Thank you for reading this one!