Gold Gradient Border
A polished gold frame with a fine inner line, where light rolls slowly around the metal. Bright and dark gold stops in a conic-gradient turn on an @property angle, which reads as moving highlights.
Also known as: gold gradient border css, metallic gold border, gold shine border css.
Gold member
HTML
<div class="bdr-gold-gradient-border">Gold member</div>
CSS
@property --bdr-gold-gradient-border-a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.bdr-gold-gradient-border {
--c: var(--bdr-color, #3b82f6);
font-size: var(--bdr-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 15em;
height: 8.5em;
border-radius: 1em;
font-family: system-ui, sans-serif;
font-weight: 600;
--fill: color-mix(in srgb, var(--c) 10%, #120e07);
box-sizing: border-box;
border: 0.3em solid transparent;
background:
linear-gradient(var(--fill), var(--fill)) padding-box,
conic-gradient(from var(--bdr-gold-gradient-border-a), #fff3c4, #d4a537 12%, #7c5512 22%, #e9c46a 34%, #fffbe6 42%, #b8861f 55%, #6b4a0f 66%, #d9ae4a 80%, #fff3c4) border-box;
color: #f2d27a;
font-family: Georgia, "Times New Roman", serif;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
animation: bdr-gold-gradient-border-spin 6s linear infinite;
}
.bdr-gold-gradient-border::after {
content: "";
position: absolute;
inset: 0.3em;
border: 1px solid color-mix(in srgb, #e9c46a 50%, transparent);
border-radius: 0.4em;
pointer-events: none;
}
@keyframes bdr-gold-gradient-border-spin {
to { --bdr-gold-gradient-border-a: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.bdr-gold-gradient-border, .bdr-gold-gradient-border *, .bdr-gold-gradient-border::before, .bdr-gold-gradient-border::after, .bdr-gold-gradient-border *::before, .bdr-gold-gradient-border *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bdr-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--bdr-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.