Is the chrome button generator free?

Yes. There is no sign-up, no watermark and no limit. Everything runs in your browser, and the text and colors you pick are not uploaded.

Can I use the buttons and text commercially?

Yes. The CSS, HTML and PNG files you generate are yours to use on personal and client projects, with no attribution required.

Does the metallic text work in every browser?

background-clip: text works in current Chrome, Edge, Safari and Firefox; the CSS sets both the standard property and the -webkit- one. The gradient sits inside an @supports check, so a browser without it shows the solid fallback color instead of invisible text.

Is the button still accessible?

It is a normal with CSS on it, so keyboard, focus and screen readers work as usual. The CSS adds a :focus-visible ring and turns the hover transition off for visitors who ask for reduced motion. Check the label contrast on your own colors, especially at low shine.

Can the metal move or reflect the page?

Not in this tool. It makes static CSS and images; only the highlight slides on hover. For metal whose reflections follow the pointer, see Liquid Metal Buttons.

Free tools / Chrome button

Free chrome button generator

Metallic CSS for buttons and headline text. Pick a finish, set the light angle, shine and rim, then copy the CSS, Tailwind or HTML, or download a PNG. Static output, no sign-up.

Chrome

The preview runs the CSS you copy. Hover or Tab to the button to see its hover state and focus ring.

Starter presets

Finish

Light angle

180°

Shine

75%

Highlight

Rim

2px

Corners

40px

Size

Show

Button label

Headline

Background

Button CSS

.chrome-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 40px;
  border: 2px solid transparent;
  border-radius: 40px;
  font: inherit;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #101318;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  background-color: #b2b9c2;
  background-image:
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.19) 30%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #f9fbfc 0%, #dce0e5 18%, #9ba3ae 44%, #616974 50%, #b2b9c2 56%, #edf0f3 80%, #c0c6ce 100%),
    linear-gradient(0deg, #f9fbfc 0%, #dce0e5 18%, #9ba3ae 44%, #616974 50%, #b2b9c2 56%, #edf0f3 80%, #c0c6ce 100%);
  background-size: 200% 200%, 100% 100%, 100% 100%;
  background-position: 50% 88%, 0 0, 0 0;
  background-origin: border-box;
  background-clip: padding-box, padding-box, border-box;
  background-repeat: no-repeat, no-repeat, no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.69), inset 0 -1px 0 rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.3), 0 10px 24px -10px rgba(0,0,0,0.9);
  cursor: pointer;
  transition: background-position 0.6s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.chrome-btn:hover {
  background-position: 50% 30%, 0 0, 0 0;
}
.chrome-btn:active {
  filter: brightness(0.96);
}
.chrome-btn:focus-visible {
  outline: 2px solid #f6f6f5;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .chrome-btn {
    transition: none;
  }
}

Metallic text CSS

.chrome-text {
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #b2b9c2; /* fallback: browsers without background-clip: text */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .chrome-text {
    background-image:
      radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.19) 30%, rgba(255,255,255,0) 62%),
      linear-gradient(180deg, #f9fbfc 0%, #dce0e5 18%, #9ba3ae 44%, #616974 50%, #b2b9c2 56%, #edf0f3 80%, #c0c6ce 100%);
    background-size: 200% 200%, 100% 100%;
    background-position: 50% 88%, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
  }
}

Tailwind (arbitrary values)

<h1 class="text-[clamp(3rem,10vw,7rem)] font-extrabold leading-none tracking-[-0.04em] text-[#b2b9c2] [background-image:radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(255,255,255,0.55)_0%,rgba(255,255,255,0.19)_30%,rgba(255,255,255,0)_62%),linear-gradient(180deg,#f9fbfc_0%,#dce0e5_18%,#9ba3ae_44%,#616974_50%,#b2b9c2_56%,#edf0f3_80%,#c0c6ce_100%)] [background-size:200%_200%,100%_100%] [background-position:50%_88%,0_0] bg-no-repeat bg-clip-text [-webkit-background-clip:text] text-transparent [-webkit-text-fill-color:transparent]">Chrome</h1>
<button type="button" class="inline-flex items-center justify-center leading-none font-semibold tracking-[-0.01em] cursor-pointer px-[40px] py-[18px] text-[19px] rounded-[40px] border-[2px] border-transparent text-[#101318] [text-shadow:0_1px_0_rgba(255,255,255,0.55)] bg-[#b2b9c2] [background-image:radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(255,255,255,0.55)_0%,rgba(255,255,255,0.19)_30%,rgba(255,255,255,0)_62%),linear-gradient(180deg,#f9fbfc_0%,#dce0e5_18%,#9ba3ae_44%,#616974_50%,#b2b9c2_56%,#edf0f3_80%,#c0c6ce_100%),linear-gradient(0deg,#f9fbfc_0%,#dce0e5_18%,#9ba3ae_44%,#616974_50%,#b2b9c2_56%,#edf0f3_80%,#c0c6ce_100%)] [background-size:200%_200%,100%_100%,100%_100%] [background-position:50%_88%,0_0,0_0] [background-origin:border-box] [background-clip:padding-box,padding-box,border-box] [background-repeat:no-repeat,no-repeat,no-repeat] shadow-[inset_0_1px_0_rgba(255,255,255,0.69),inset_0_-1px_0_rgba(0,0,0,0.3),0_1px_2px_rgba(0,0,0,0.3),0_10px_24px_-10px_rgba(0,0,0,0.9)] transition-[background-position,box-shadow,filter] duration-[600ms] motion-reduce:transition-none hover:[background-position:50%_30%,0_0,0_0] active:brightness-[0.96] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#f6f6f5]">Get started</button>

HTML (button + style)

<style>
.chrome-text {
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #b2b9c2; /* fallback: browsers without background-clip: text */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .chrome-text {
    background-image:
      radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.19) 30%, rgba(255,255,255,0) 62%),
      linear-gradient(180deg, #f9fbfc 0%, #dce0e5 18%, #9ba3ae 44%, #616974 50%, #b2b9c2 56%, #edf0f3 80%, #c0c6ce 100%);
    background-size: 200% 200%, 100% 100%;
    background-position: 50% 88%, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
  }
}
.chrome-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 40px;
  border: 2px solid transparent;
  border-radius: 40px;
  font: inherit;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #101318;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  background-color: #b2b9c2;
  background-image:
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.19) 30%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #f9fbfc 0%, #dce0e5 18%, #9ba3ae 44%, #616974 50%, #b2b9c2 56%, #edf0f3 80%, #c0c6ce 100%),
    linear-gradient(0deg, #f9fbfc 0%, #dce0e5 18%, #9ba3ae 44%, #616974 50%, #b2b9c2 56%, #edf0f3 80%, #c0c6ce 100%);
  background-size: 200% 200%, 100% 100%, 100% 100%;
  background-position: 50% 88%, 0 0, 0 0;
  background-origin: border-box;
  background-clip: padding-box, padding-box, border-box;
  background-repeat: no-repeat, no-repeat, no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.69), inset 0 -1px 0 rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.3), 0 10px 24px -10px rgba(0,0,0,0.9);
  cursor: pointer;
  transition: background-position 0.6s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.chrome-btn:hover {
  background-position: 50% 30%, 0 0, 0 0;
}
.chrome-btn:active {
  filter: brightness(0.96);
}
.chrome-btn:focus-visible {
  outline: 2px solid #f6f6f5;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .chrome-btn {
    transition: none;
  }
}
</style>
<h1 class="chrome-text">Chrome</h1>
<button type="button" class="chrome-btn">Get started</button>

Give your button the chrome-btn class and your heading the chrome-text class. The PNG draws the same gradient stops on a canvas.

How a CSS chrome effect works

Polished metal is mostly reflection: a bright sky above, a dark horizon, and a lighter floor below. A linear-gradient() with several close stops fakes that: light at the top, a sharp dark band just past the middle, light again underneath. Tint the stops yellow and it reads as gold, orange-brown for copper, near-black for black chrome. The light angle turns the gradient, and shine pushes the stops apart or pulls them together.

On top sits a highlight: a soft white radial-gradient() glint or a conic-gradient() sheen, placed near the lit edge. On hover the CSS moves it with background-position, so the light slides across. The rim is the same gradient turned 180 degrees and painted only on the border, which gives the edge a bevel, and inset box-shadow lines add a top highlight and a bottom shade.

Metallic text uses the same gradient as the text’s background, clipped to the letters with background-clip: text (and -webkit-background-clip: text) and a transparent text color. The CSS keeps a solid fallback color for browsers that can’t clip.

What static CSS can’t do

Real chrome reflects its surroundings and changes as you move. A gradient can’t: it is the same picture of a reflection wherever the button sits and whatever the pointer does, and only the highlight moves, on hover. That is fine for most buttons and headlines. For metal that reacts to the pointer, you need a shader, which is what Liquid Metal Buttons does with WebGL.

Use the CSS on your site

Webflow: add an Embed element with the CSS in a <style> tag, then give your Button the class chrome-btn (or a heading chrome-text). Webflow effects.
Framer: paste the CSS in a <style> tag under Site Settings, Custom Code, or drop the HTML output into an Embed. Framer effects.
WordPress: paste the CSS into Appearance, Customize, Additional CSS (or the Site Editor’s Styles, Additional CSS), and add chrome-btn as the Button block’s Additional CSS class. WordPress effects.
Shopify: paste the CSS into base.css (or a section’s {% style %} block) and add the class to the button in your theme. Shopify effects.
React: paste the CSS into a stylesheet and use className="chrome-btn", or use the Tailwind classes. React effects.

Want it to move? The how-to for a liquid metal button effect in Webflow and Framer covers it, or see the full list of web effects. Also free: mesh gradient generator and dot grid generator.

Frequently asked questions

Is the chrome button generator free?: Yes. There is no sign-up, no watermark and no limit. Everything runs in your browser, and the text and colors you pick are not uploaded.
Can I use the buttons and text commercially?: Yes. The CSS, HTML and PNG files you generate are yours to use on personal and client projects, with no attribution required.
Does the metallic text work in every browser?: background-clip: text works in current Chrome, Edge, Safari and Firefox; the CSS sets both the standard property and the -webkit- one. The gradient sits inside an @supports check, so a browser without it shows the solid fallback color instead of invisible text.
Is the button still accessible?: It is a normal <button> with CSS on it, so keyboard, focus and screen readers work as usual. The CSS adds a :focus-visible ring and turns the hover transition off for visitors who ask for reduced motion. Check the label contrast on your own colors, especially at low shine.
Can the metal move or reflect the page?: Not in this tool. It makes static CSS and images; only the highlight slides on hover. For metal whose reflections follow the pointer, see Liquid Metal Buttons. See Liquid Metal Buttons.