CodeKitHubWhat Is This Tool?
This tool applies a preset three-stop linear gradient for each metal style, tuned to look like light reflecting off a polished metal surface.
Switch between Gold, Silver, Bronze, and Rose Gold using the style selector, each with its own gradient, text color, and shadow tuned to that metal.
A live preview updates instantly as you type your button text, switch styles, or adjust the corner radius, so you can see exactly how it will look before copying the CSS.
Why Use It?
- You're building a pricing page and want the "Upgrade to Premium" button to visually stand apart from the free-tier button below it — a gold gradient signals "premium" faster than a color swap alone.
- You're designing a loyalty or membership program with Bronze, Silver, and Gold tiers — generate all three metal styles in one sitting so the visual hierarchy matches the naming.
- An e-commerce "Buy Now" or "Add to Cart" button is currently a flat brand color and testing shows it's getting lost on the page — a metallic gradient adds visual weight without changing the copy.
- You're mocking up an awards or certificate page and need a badge that reads as gold, silver, or bronze without opening an image editor.
- You want a rose gold accent to match a specific brand palette (beauty, jewelry, wedding sites) rather than the more common yellow-gold look most gold-button generators default to.
- 100% local: the CSS is generated entirely in your browser, with nothing sent to a server.
How to Use
- Type your button text.
- Choose a metal style — Gold, Silver, Bronze, or Rose Gold.
- Adjust the border radius slider to match your design's corner style.
- Click "Copy" to copy the generated CSS code and paste it into your stylesheet.
Example
Input
Text: "Buy Now", Style: Gold, Radius: 8Output
background: linear-gradient(180deg, #f9e28c 0%, #d4a017 50%, #f9e28c 100%);
color: #5c3d00;
border: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(212,160,23,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
padding: 12px 32px;
font-weight: 600;
cursor: pointer;The generated CSS combines a three-stop metallic gradient, a matching text color and shadow, and standard button padding for a ready-to-use style block.
Metal styles at a glance
Each metal style uses its own tuned gradient, text color, and shadow color.
| Style | Gradient Tone | Text Color |
|---|---|---|
| Gold | Warm yellow-gold, light to dark to light | Deep brown-gold (#5c3d00) |
| Silver | Cool light gray, light to dark to light | Dark gray (#333333) |
| Bronze | Warm copper-brown, light to dark to light | Deep brown (#3e2408) |
| Rose Gold | Soft pink-blush, light to dark to light | Deep rose (#4a1620) |
Matching a metal style to your use case
- Gold reads as "premium" or "upgrade" almost universally — it's the safest default for pricing-page CTAs, VIP tiers, and subscription upsells.
- Silver works well as a "second tier" alongside a gold option (Bronze/Silver/Gold loyalty programs), or on its own for a cooler, more corporate tone than gold provides.
- Bronze fits third-place badges, entry-level membership tiers, or any design that wants a warm metallic feel without gold's stronger "luxury" connotation.
- Rose Gold suits beauty, jewelry, wedding, and lifestyle brands where the more common yellow-gold look would clash with an already-pink or blush color palette.
Related tools
For more CSS generators, try these.
→ Neon Text Generator · CSS Emboss Text Generator · Border Radius Generator
Frequently Asked Questions
Why does the gradient have three color stops instead of two?
A three-stop gradient (light, dark, light) mimics how light reflects off a curved or brushed metal surface, which looks far more realistic than a simple two-color fade from light to dark.
Can I use this on a link or div instead of a button element?
Yes — the generated CSS is just standard background, color, border-radius, box-shadow, and text-shadow properties, so it works on any element you'd normally style as a button.
Why is the text color dark instead of white?
Metallic surfaces like gold and bronze read best with a dark, warm text color that matches the metal's shade — white text tends to look flat and break the metallic illusion.
Does this tool save or track what I type?
No. The CSS is generated entirely in your browser — nothing is sent to or stored on a server.
Will this work in all browsers?
Yes — linear-gradient, box-shadow, and text-shadow all have excellent support across all modern browsers, including Chrome, Firefox, Safari, and Edge.
How do I add a hover or active state to the generated button?
The generated CSS covers the button's default state only. A common approach is to add a :hover rule that slightly darkens the gradient stops or increases the box-shadow spread, plus a transition: all 0.2s ease; on the base class so the change animates smoothly rather than snapping instantly.
Can I change the gradient direction, like left-to-right instead of top-to-bottom?
Yes — the generated linear-gradient(180deg, ...) uses 180deg for a top-to-bottom sheen, which reads as the most natural light direction for a button. Edit that angle after copying (90deg for left-to-right, 135deg for a diagonal sheen) if your design calls for a different light direction, though very shallow angles can make the three-stop gradient look more like stripes than a metallic curve.
Why does my button look flat instead of metallic after I copy the CSS?
The most common cause is another CSS rule overriding one of the generated properties, especially background or background-color from a CSS reset or component library, which silently replaces the gradient with a solid color. Check your browser dev tools for a strikethrough on the background property to confirm it's being overridden, and increase the selector's specificity or add !important as a last resort.
Can I combine the gold button style with the CSS Emboss Text Generator on this site?
Yes — they target different properties, so there's no conflict. Generate the button's background, border, and box-shadow here, then swap in an embossed text-shadow value from the Emboss Text Generator for the button label if you want the text itself to also look raised or engraved rather than using this tool's default flat text-shadow.
Does the corner radius slider affect anything besides the button shape?
No — it only sets the border-radius value; the gradient, shadow, and text color are unaffected regardless of how rounded or square the corners are. Sharper corners (radius near 0) tend to read as more formal or corporate, while a fully rounded pill shape often fits playful or e-commerce contexts better.