Coyote Labby Coyote Concept

NewCSS + small JS · repeating-linear-gradient · custom properties

Metal

Brushed metal, tinted by your accent, with a highlight that follows the cursor like light on a plate.

A free brushed metal effect in HTML and CSS (with a few lines of JavaScript). Also known as metallic button, chrome effect, metal texture CSS or shiny steel button.

Class
.CCMetal
Weight
1.2 KB
Needs
CSS + a few lines of JS
Best for
Luxury, watches, tools, motoring

Tune it

Every snippet on this page follows these settings.

How the Metal hover effect works

  1. Three layers: a soft radial highlight, hair-thin brushed lines, and a silver gradient tinted with the accent.
  2. Inset shadows give the edge a bevel, and the label gets a light engraved shadow.
  3. Script moves the highlight to the cursor through --cc-x and --cc-y.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCMetal">.
  4. Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Metal on button, dropdown, card.

More ways to use it

The same class on badge, nav bar.

The Metal code

The plain CSS and JavaScript behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS
.CCMetal {
  --cc-x: 50%;
  --cc-y: 30%;
  border: 1px solid rgba(0, 0, 0, .45);
  color: #1d1d20;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  background:
    radial-gradient(circle at var(--cc-x) var(--cc-y), rgba(255, 255, 255, calc(.85 * var(--cc-intensity))), transparent 45%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,
      color-mix(in srgb, var(--cc-accent) 18%, #f4f4f4),
      color-mix(in srgb, var(--cc-accent) 22%, #a3a3a3) 48%,
      color-mix(in srgb, var(--cc-accent) 14%, #dcdcdc) 52%,
      color-mix(in srgb, var(--cc-accent) 25%, #8a8a8a));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 8px 20px -10px rgba(0, 0, 0, .8);
}
.CCMetal :is(a:not(.CCButton), .CCCard-eyebrow, .CCCard-price, h3, p) { color: inherit; }
Show the JavaScript
document.querySelectorAll(".CCMetal").forEach(function (el) {
  if (el.dataset.ccMetal) return; el.dataset.ccMetal = 1;
  el.addEventListener("pointermove", function (e) {
    var r = el.getBoundingClientRect();
    el.style.setProperty("--cc-x", e.clientX - r.left + "px");
    el.style.setProperty("--cc-y", e.clientY - r.top + "px");
  });
  el.addEventListener("pointerleave", function () { el.style.removeProperty("--cc-x"); el.style.removeProperty("--cc-y"); });
});

Pairs well with

Avoid on the same element Ember Glow (box-shadow), Shimmer Border (background), Liquid Fill (fill), Ink Pour (fill), Neon (box-shadow), Northern Lights (background, box-shadow, fill), Stack Pop (box-shadow, fill), Arrow Slide (fill), Soft Press (background, box-shadow), Grain (background, fill), Pixel (fill), Goo (fill).

Browser support

Chrome & Edge111+
Safari16.2+
Firefox113+

Older browsers show the element without the effect: nothing breaks.

Accessibility

  • Dark text on light metal keeps strong contrast.
  • No motion of its own, so it's safe under reduced motion.

Performance

  • 1.2 KB of code, no libraries.
  • Animates transforms, opacity and gradients, which browsers handle cheaply.
  • This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Metal

What is a brushed metal effect?

Brushed metal, tinted by your accent, with a highlight that follows the cursor like light on a plate. Metal is a free brushed metal effect, also known as metallic button or chrome effect, that works on buttons, dropdowns, cards and more.

How do you make a brushed metal effect in CSS?

Three layers: a soft radial highlight, hair-thin brushed lines, and a silver gradient tinted with the accent. Inset shadows give the edge a bevel, and the label gets a light engraved shadow. Script moves the highlight to the cursor through --cc-x and --cc-y.

How do I add Metal to a button?

Add the class CCMetal next to CCButton, inside an element with the CCTheme class, then include the Metal CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Metal need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Metal?

Chrome and Edge 111+, Safari 16.2+ and Firefox 113+. Older browsers show the element without the effect, so nothing breaks.

Is Metal accessible?

Dark text on light metal keeps strong contrast. No motion of its own, so it's safe under reduced motion.

Can I use Metal in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCMetal to a button or block, and paste the JavaScript into the footer code area.

Is Metal free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.