CSS Gradient Border & Text Effects — Code Generator & Examples

Gradient Borders and Text in CSS

Two of the most requested gradient effects — a css gradient border and css gradient text — aren't single CSS properties. There's no border-gradient, and text doesn't take a gradient fill directly. But both are achievable with clean, well-supported techniques, and TooStamply's gradient generator can produce the colors visually so you only copy the finished code.

This guide collects the reliable patterns for gradient borders (including rounded ones), gradient text, and gradient glow shadows, with copy-paste CSS for each.

Gradient Borders in CSS

There are three dependable approaches to a gradient border css effect, each with different trade-offs.

Method 1: border-image

The simplest option uses border-image:

.gradient-border {
  border: 3px solid;
  border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
}

The catch: border-image ignores border-radius, so corners stay square. If you need rounded corners, use one of the next two methods.

Method 2: Two backgrounds (supports border-radius)

For a css gradient border with radius, paint a gradient on the border-box and a solid color on the padding-box, and let a transparent border reveal the gradient:

.gradient-border-rounded {
  border: 3px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #667eea, #764ba2) border-box;
}

This is the cleanest rounded-border technique and works across all current browsers in 2026.

Method 3: Pseudo-element

A pseudo-element behind the box gives you the most control, including animated borders:

.gradient-border-fancy {
  position: relative;
  border-radius: 12px;
}

.gradient-border-fancy::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, #667eea, #764ba2);
  z-index: -1;
}

Here's how the three compare:

Gradient Text

For gradient text css, clip a gradient background to the shape of the text:

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

The -webkit- prefixes are still worth keeping for older Safari and Chrome builds. This same css gradient color text technique works with any gradient type, including conic:

.conic-text {
  background: conic-gradient(from 0deg, #ff5f6d, #ffc371, #ff5f6d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

If you're on Tailwind, the same effect is a few utility classes — see the Tailwind gradient generator guide.

OKLCH for Richer Gradient Fills

Both borders and text look sharper when the gradient itself blends cleanly. Building the gradient in OKLCH keeps perceived lightness even across the sweep:

.oklch-text {
  background: linear-gradient(90deg,
    oklch(0.65 0.22 20),
    oklch(0.65 0.22 290));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

The OKLCH gradient guide explains the color science in more detail.

Gradient Glow Shadow

CSS box-shadow only takes solid colors, but you can fake a gradient glow with a blurred pseudo-element:

.gradient-shadow {
  position: relative;
}

.gradient-shadow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #667eea, #764ba2);
  filter: blur(20px);
  opacity: 0.5;
  z-index: -1;
}

This is a favorite for glowing buttons and cards — the gradient buttons guide shows the effect applied to interactive elements.

Animated Gradient Borders

The pseudo-element method is the foundation for one of the most eye-catching effects on the web: a border whose gradient rotates around the element. Register an angle property and animate it, and the border appears to spin:

@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.animated-border {
  position: relative;
  border-radius: 12px;
  background: #111;
}

.animated-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--border-angle),
    #667eea, #764ba2, #667eea);
  z-index: -1;
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  to { --border-angle: 360deg; }
}

For timing and reduced-motion handling on effects like this, the animated gradient guide is the companion read.

Gradient Underlines

A subtler cousin of gradient text is the gradient underline, which uses background-image layered under inline text. It's a tasteful way to highlight links without changing the text color:

.gradient-underline {
  background-image: linear-gradient(90deg, #667eea, #764ba2);
  background-position: 0 100%;
  background-size: 100% 3px;
  background-repeat: no-repeat;
  padding-bottom: 2px;
}

Because it's driven by background-size, you can even animate the underline growing from left to right on hover — a nice touch for navigation and inline links.

Browser Support in 2026

All of these techniques rely on features that are stable across current browsers. Multiple background layers, background-clip: text, inset, and pseudo-elements have broad support. The newer @property rule that powers animated angles is supported in every evergreen browser as of 2026; where you need to support much older builds, the effect degrades gracefully to a static gradient rather than breaking. As always, keep a solid-color fallback declared before any advanced gradient so the layout never ends up with no background at all.

Putting It Together on a Button

Gradient borders, text, and glows combine well. A button with a gradient border and a soft glow reads as premium without a single image:

1. Give the button a transparent border and the two-background gradient border from Method 2.
2. Add a blurred pseudo-element for the glow.
3. Optionally clip a gradient into the label text for extra polish.

You can design each layer's colors in the gradient generator and browse ready-made palettes in the UI gradients collection.

How the Generator Helps

TooStamply's editor lets you pick the exact gradient for a border, a text fill, or a glow, then export to plain CSS, Tailwind, or SCSS. You get correct color stops and OKLCH support without hand-tuning hex values, and the output drops straight into the patterns above.

Frequently Asked Questions

Why doesn't my gradient border have rounded corners?

You're probably using border-image, which ignores border-radius. Switch to the two-background method or a pseudo-element to get rounded corners.

Do I still need the -webkit- prefixes for gradient text?

Keep them. The unprefixed background-clip: text is widely supported in 2026, but the -webkit- versions ensure older Safari and Chrome builds still render the effect.

Can I animate a gradient border?

Yes. Use the pseudo-element method and animate the gradient or rotate a conic gradient with @keyframes. See the animated gradient guide for timing patterns.

Can CSS box-shadow use a gradient?

Not directly — box-shadow takes solid colors only. Simulate a gradient glow with a blurred, gradient-filled pseudo-element positioned behind the element.

Ready to build these effects? Open the free CSS Gradient Generator →