HTML & CSS

Add Gradient Color to a CSS Button and Its States

Add a gradient to a button, define hover and disabled styles, preserve a visible keyboard focus ring, and check the foreground against both endpoint colors.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Apply the gradient to the button’s background

To add gradient color to a button in CSS, set a gradient image on its background and keep its label color separate. Use a native button for an action so keyboard activation and disabled behavior are already available. A decorative gradient does not provide the semantics or event handling of an interactive control.

Choose the normal, hover and disabled appearances together. If only the normal state is considered, an existing hover rule might replace the gradient with an unreadable color or a disabled rule might leave the control looking fully active. Keep focus indication independent from the gradient so keyboard users can locate the button in every palette.

Style an action button without removing its behavior

The following markup is a styling example. Connect the button to your application’s real action separately. Its type is button, so placing the sample inside a form does not accidentally turn it into a submit control. Use type submit instead when form submission is the intended behavior.

<button class="gradient-action" type="button">Create preview</button>

.gradient-action {
  box-sizing: border-box;
  max-width: 100%;
  padding: .8rem 1.25rem;
  border: 2px solid transparent;
  border-radius: .6rem;
  color: #ffffff;
  background-color: #1d4ed8;
  background-image: linear-gradient(90deg, #1d4ed8, #7e22ce);
  font: 700 1rem/1.4 system-ui, sans-serif;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.gradient-action:hover:not(:disabled) {
  background-image: linear-gradient(90deg, #1e40af, #6b21a8);
}
.gradient-action:focus-visible {
  outline: 3px solid #111827;
  outline-offset: 3px;
}
.gradient-action:disabled {
  color: #ffffff;
  background: #475569;
  cursor: not-allowed;
}
@media (forced-colors: active) {
  .gradient-action {
    color: ButtonText;
    background: ButtonFace;
    border-color: ButtonText;
  }
  .gradient-action:focus-visible { outline-color: Highlight; }
}

The hover rule excludes disabled buttons, so it does not recolor a control that cannot be activated. The disabled state uses a solid surface instead of merely reducing the opacity of the entire element. This keeps the label readable while giving the control a visibly different treatment.

Generate and compare two endpoint palettes

Open the CSS Gradient Generator, choose Linear, set angle 90, and enter #1d4ed8 and #7e22ce. That supplies the normal background. Compare #1e40af and #6b21a8 for the darker hover state. Copy each gradient value into the appropriate selector rather than applying both declarations to the same rule.

The generator exports a single two-color background declaration. It does not create button markup, disabled behavior, hover rules or a focus indicator. Those belong to the component. If you copy its background shorthand into an existing button, inspect any border, size or state rules that still affect the result.

Test mouse, keyboard and disabled interaction

Hover over the enabled button and confirm that the darker palette appears. Move the pointer away, then reach the button with Tab and check its outline. Activate it with Enter or Space after attaching the real action. A visible hover change does not replace keyboard focus, and an outline should not be removed merely to preserve the gradient’s appearance.

Add the disabled attribute and verify that the button no longer activates. Do not use only a disabled-looking class while leaving the action enabled. If your application uses aria-disabled instead of the native attribute for a specific reason, it must also implement the intended interaction behavior; that is beyond this styling-only example.

Check the label against every state

Measure white text against both endpoint colors, then inspect the rendered blend where the label appears. A middle hue or a changed design background can matter as well. Use the contrast checker for individual opaque pairs, and inspect the actual button for its geometry, borders and focus ring.

Replace the short label with a longer phrase and enlarge the text. The button should grow vertically or wrap without overflowing its container. Avoid fixing its height just to match one screenshot, because translated labels and user font settings can require more room.

Respect alternate color presentation

In forced-color mode, the example uses system colors and a visible border. The decorative gradient is no longer the main cue. MDN’s focus-visible documentation describes keyboard-oriented focus styling; its forced-colors reference explains the user-selected palette.

Keep any success, error or busy status in text associated with the action rather than encoding it only by changing the gradient. Styling can reinforce the state, but the user still needs to know what happened and whether the control is available for another action.