CSS Text Gradient: Jak stworzyć tekst gradientowy w czystym CSS

Gradient text is one of the most eye-catching visual effects in modern web design. From hero headings to logo text, gradient text adds depth and personality without requiring any images. This complete CSS text gradient guide covers every technique — from the basic three-property trick to animated rainbow text, Tailwind CSS shortcuts, React integration, and 10 beautiful copy-paste examples.

1. The Basic Technique: background + background-clip + text-fill-color

The foundation of every CSS text gradient is a three-property combination. The idea is simple: apply a gradient as the background of the text element, clip the background to the shape of the text, and then make the text itself transparent so the gradient shows through.

Here is the essential CSS pattern that every text gradient uses:

.gradient-text {
  /* Fallback solid color for unsupported browsers */
  color: #3b82f6;

  /* Step 1: Apply a gradient as the background */
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);

  /* Step 2: Clip the background to the text shape */
  -webkit-background-clip: text;
  background-clip: text;

  /* Step 3: Make the text transparent to reveal the gradient */
  -webkit-text-fill-color: transparent;
}

/* HTML usage */
<h1 class="gradient-text">Hello Gradient World</h1>

How it works: background applies the gradient to the entire element. background-clip: text clips the background so it only shows through the text glyphs. -webkit-text-fill-color: transparent (or color: transparent) makes the actual text color invisible, revealing the gradient underneath. The -webkit- prefix is still needed for background-clip: text in many browsers, including Chrome and Safari.

Always include a solid color value before the gradient declarations as a fallback for browsers or contexts that do not support background-clip: text.

2. Linear Gradient Text: Horizontal, Vertical, Diagonal

Linear gradients are the most common choice for text gradients. You can control the direction of the color flow using angles or direction keywords.

Horizontal (Left to Right)

.gradient-horizontal {
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  /* equivalent: linear-gradient(90deg, #3b82f6, #8b5cf6) */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Vertical (Top to Bottom)

.gradient-vertical {
  background: linear-gradient(to bottom, #f59e0b, #ef4444);
  /* equivalent: linear-gradient(180deg, #f59e0b, #ef4444) */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Diagonal (45 degrees)

.gradient-diagonal {
  background: linear-gradient(45deg, #06b6d4, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Custom Angle with Multiple Stops

.gradient-custom {
  background: linear-gradient(
    120deg,
    #ff6b6b 0%,
    #feca57 25%,
    #48dbfb 50%,
    #ff9ff3 75%,
    #54a0ff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Tip: Horizontal gradients (to right or 90deg) tend to look best on single-line text. For multi-line text, vertical gradients (to bottom) often produce more consistent results because each line gets a different shade.

3. Radial Gradient Text

Radial gradients create a spotlight or glow effect on text. The gradient radiates outward from a center point, producing a more organic, dimensional look.

/* Basic radial gradient text */
.gradient-radial {
  background: radial-gradient(circle, #f59e0b, #ef4444, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Spotlight glow effect */
.gradient-spotlight {
  background: radial-gradient(
    ellipse at 50% 50%,
    #fbbf24 0%,
    #f59e0b 30%,
    #b45309 70%,
    #78350f 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Positioned Radial Gradient

/* Radial gradient positioned at top-left */
.gradient-radial-tl {
  background: radial-gradient(
    circle at top left,
    #22d3ee, #6366f1, #a855f7
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Radial gradient positioned at custom coordinates */
.gradient-radial-custom {
  background: radial-gradient(
    circle at 30% 40%,
    #34d399, #059669, #064e3b
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Tip: Radial gradients on text work best for shorter headings or single words. On long paragraphs, the center bright spot becomes too distant from edge text.

4. Conic Gradient Text

Conic gradients sweep colors around a center point like a color wheel. Applied to text, they create unique holographic or prismatic effects.

/* Basic conic gradient text */
.gradient-conic {
  background: conic-gradient(
    from 0deg,
    #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Conic gradient with starting angle and position */
.gradient-conic-offset {
  background: conic-gradient(
    from 45deg at 50% 50%,
    #06b6d4, #8b5cf6, #ec4899, #06b6d4
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Metallic / holographic effect */
.gradient-holographic {
  background: conic-gradient(
    from 0deg,
    #c0c0c0, #f0f0f0, #a0a0a0, #d0d0d0,
    #e0e0e0, #b0b0b0, #f0f0f0, #c0c0c0
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Tip: Conic gradients produce their most dramatic effects on larger text. On small font sizes, the color transitions can appear muddy.

5. Animated Gradient Text (with @keyframes)

Animated gradient text draws attention to headings and call-to-action elements. There are two primary approaches: animating background-position on an oversized gradient, and using @property to animate custom properties.

Method 1: background-position Animation

This method creates a gradient much larger than the element, then shifts its position over time. It works in all modern browsers:

.animated-gradient-text {
  background: linear-gradient(
    270deg,
    #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #ff6b6b
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Method 2: @property Animation (Chrome, Edge, Safari)

The @property method lets you animate individual color stops smoothly. It produces higher-quality animations but requires browser support for CSS @property:

@property --color-1 {
  syntax: '<color>';
  initial-value: #3b82f6;
  inherits: false;
}

@property --color-2 {
  syntax: '<color>';
  initial-value: #8b5cf6;
  inherits: false;
}

@property --color-3 {
  syntax: '<color>';
  initial-value: #ec4899;
  inherits: false;
}

.animated-property-text {
  background: linear-gradient(135deg, var(--color-1), var(--color-2), var(--color-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: color-cycle 3s ease-in-out infinite;
}

@keyframes color-cycle {
  0%   { --color-1: #3b82f6; --color-2: #8b5cf6; --color-3: #ec4899; }
  33%  { --color-1: #ec4899; --color-2: #3b82f6; --color-3: #8b5cf6; }
  66%  { --color-1: #8b5cf6; --color-2: #ec4899; --color-3: #3b82f6; }
  100% { --color-1: #3b82f6; --color-2: #8b5cf6; --color-3: #ec4899; }
}

Method 3: Hue Rotation Filter

The simplest approach uses the <code>hue-rotate</code> filter to cycle through colors. It is less customizable but works everywhere:

.hue-rotate-text {
  background: linear-gradient(90deg, #3b82f6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hue-shift 3s linear infinite;
}

@keyframes hue-shift {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

6. Multi-Color Rainbow Text

Rainbow text uses the full spectrum of colors. Here are several approaches from simple to advanced:

Full Spectrum Rainbow

.rainbow-text {
  background: linear-gradient(
    90deg,
    #ff0000, #ff8000, #ffff00, #00ff00,
    #00ffff, #0000ff, #8000ff, #ff0080
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Neon Rainbow (Vivid Saturated Colors)

.neon-rainbow {
  background: linear-gradient(
    90deg,
    #ff1744, #ff9100, #ffea00, #00e676,
    #00e5ff, #2979ff, #d500f9, #ff1744
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  text-shadow: none; /* text-shadow does not work with gradient text */
}

Animated Rainbow

.animated-rainbow {
  background: linear-gradient(
    90deg,
    #ff0000, #ff8000, #ffff00, #00ff00,
    #00ffff, #0000ff, #8000ff, #ff0080, #ff0000
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-move 3s linear infinite;
}

@keyframes rainbow-move {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

Per-Character Rainbow (CSS-only with spans)

For per-character color control, wrap each letter in a <span> and use animation-delay:

/* HTML: <span class="char" style="--i:0">R</span>
         <span class="char" style="--i:1">A</span>
         <span class="char" style="--i:2">I</span> ... */

.char {
  display: inline-block;
  animation: char-rainbow 2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.1s);
}

@keyframes char-rainbow {
  0%, 100% { color: #ff0000; }
  14%  { color: #ff8000; }
  28%  { color: #ffff00; }
  42%  { color: #00ff00; }
  57%  { color: #00ffff; }
  71%  { color: #0000ff; }
  85%  { color: #8000ff; }
}

7. Browser Support & Fallbacks

The text gradient technique has excellent browser support in 2026, but there are important nuances:

Recommended Fallback Pattern

Always structure your CSS so that older browsers see a solid color:

/* Fallback-first approach */
.gradient-text {
  /* 1. Solid color fallback */
  color: #3b82f6;
}

/* 2. Apply gradient only if supported */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .gradient-text {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

Key point: The color declaration provides the fallback. If background-clip: text is not supported, the solid color is visible. The @supports block applies the gradient only when the browser supports the feature.

8. Tailwind CSS: bg-gradient-to-r, bg-clip-text

Tailwind CSS provides utility classes that make gradient text trivial to implement without writing custom CSS:

Basic Tailwind Gradient Text

<!-- Tailwind v3 gradient text -->
<h1 class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
           bg-clip-text text-transparent text-5xl font-bold">
  Gradient Heading
</h1>

<!-- Breakdown of classes: -->
<!-- bg-gradient-to-r  → background: linear-gradient(to right, ...) -->
<!-- from-blue-500     → starting color: #3b82f6 -->
<!-- via-purple-500    → middle color: #a855f7 -->
<!-- to-pink-500       → ending color: #ec4899 -->
<!-- bg-clip-text      → background-clip: text -->
<!-- text-transparent  → color: transparent -->

Custom Colors with Tailwind

<!-- Using arbitrary values for custom gradient colors -->
<h1 class="bg-gradient-to-r from-[#667eea] to-[#764ba2]
           bg-clip-text text-transparent text-4xl font-bold">
  Custom Gradient
</h1>

<!-- Diagonal gradient with arbitrary angle -->
<h1 class="bg-[linear-gradient(135deg,#f093fb,#f5576c)]
           bg-clip-text text-transparent text-4xl font-bold">
  Diagonal Custom
</h1>

Animated Gradient Text in Tailwind (with custom CSS)

Tailwind does not have built-in animation utilities for gradients, but you can combine utility classes with a small custom animation:

<!-- tailwind.config.js -->
module.exports = {
  theme: {
    extend: {
      animation: {
        'gradient-x': 'gradient-x 3s ease infinite',
      },
      keyframes: {
        'gradient-x': {
          '0%, 100%': { 'background-position': '0% 50%' },
          '50%': { 'background-position': '100% 50%' },
        },
      },
    },
  },
}

<!-- HTML with animation class -->
<h1 class="bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500
           bg-[length:200%_100%] bg-clip-text text-transparent
           animate-gradient-x text-5xl font-bold">
  Animated Gradient
</h1>

Tailwind v4 Syntax

In Tailwind v4, the gradient utilities have been updated:

<!-- Tailwind v4 uses bg-linear-* instead of bg-gradient-* -->
<h1 class="bg-linear-to-r from-blue-500 via-purple-500 to-pink-500
           bg-clip-text text-transparent text-5xl font-bold">
  Tailwind v4 Gradient
</h1>

<!-- Tailwind v4 also supports arbitrary gradient directions -->
<h1 class="bg-linear-[135deg] from-cyan-400 to-blue-600
           bg-clip-text text-transparent text-5xl font-bold">
  135 Degree Gradient
</h1>

9. React / Next.js: Inline Styles vs CSS Modules

In React and Next.js projects, you have several options for implementing gradient text:

Method 1: Inline Styles

Inline styles work but require the WebkitBackgroundClip and WebkitTextFillColor camelCase properties:

// React component with inline styles
function GradientHeading({ children }: { children: React.ReactNode }) {
  return (
    <h1
      style={{
        background: 'linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899)',
        WebkitBackgroundClip: 'text',
        backgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        color: 'transparent', // fallback
        fontSize: '3rem',
        fontWeight: 'bold',
      }}
    >
      {children}
    </h1>
  );
}

// Usage
<GradientHeading>Hello Gradient</GradientHeading>

Method 2: CSS Modules

CSS Modules provide clean separation and full CSS feature support:

/* GradientText.module.css */
.gradientText {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #3b82f6; /* fallback */
}

.gradientText.animated {
  background-size: 300% 100%;
  animation: shift 4s ease infinite;
}

@keyframes shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

// GradientText.tsx
import styles from './GradientText.module.css';

interface Props {
  children: React.ReactNode;
  animated?: boolean;
  as?: 'h1' | 'h2' | 'h3' | 'span' | 'p';
}

export function GradientText({ children, animated, as: Tag = 'h1' }: Props) {
  const className = [
    styles.gradientText,
    animated && styles.animated,
  ].filter(Boolean).join(' ');

  return <Tag className={className}>{children}</Tag>;
}

// Usage
<GradientText animated as="h1">Animated Heading</GradientText>

Method 3: Reusable React Component

Create a flexible, reusable gradient text component:

// Flexible reusable component
interface GradientTextProps {
  children: React.ReactNode;
  from?: string;
  via?: string;
  to?: string;
  direction?: string;
  as?: keyof JSX.IntrinsicElements;
  className?: string;
}

export function GradientText({
  children,
  from = '#3b82f6',
  via,
  to = '#ec4899',
  direction = '135deg',
  as: Tag = 'span',
  className = '',
}: GradientTextProps) {
  const colors = via ? `${from}, ${via}, ${to}` : `${from}, ${to}`;
  const gradient = `linear-gradient(${direction}, ${colors})`;

  return (
    <Tag
      className={className}
      style={{
        background: gradient,
        WebkitBackgroundClip: 'text',
        backgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        color: from, // fallback
      }}
    >
      {children}
    </Tag>
  );
}

// Usage examples
<GradientText as="h1" from="#f59e0b" to="#ef4444">
  Sunset Title
</GradientText>

<GradientText as="h2" from="#06b6d4" via="#8b5cf6" to="#ec4899" direction="90deg">
  Three-Color Heading
</GradientText>

Next.js Tip

In Next.js App Router, CSS Modules work out of the box. If you use inline styles in a Server Component, the gradient renders on the server with zero client-side JavaScript. For animated gradients, you will need a Client Component ('use client').

10. 10 Beautiful Gradient Text Examples

Here are 10 production-ready gradient text styles you can copy and paste directly into your projects:

1. Ocean Blue

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

2. Sunset Orange

.sunset-orange {
  background: linear-gradient(to right, #f12711, #f5af19);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

3. Aurora Green

.aurora-green {
  background: linear-gradient(135deg, #00c9ff 0%, #92fe9d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

4. Royal Purple

.royal-purple {
  background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

5. Fire Red

.fire-red {
  background: linear-gradient(to right, #f83600 0%, #f9d423 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

6. Cotton Candy

.cotton-candy {
  background: linear-gradient(to right, #ffecd2 0%, #fcb69f 50%, #ff9a9e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

7. Gold Luxury

.gold-luxury {
  background: linear-gradient(
    135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

8. Neon Cyberpunk

.neon-cyberpunk {
  background: linear-gradient(
    90deg, #f72585, #b5179e, #7209b7, #560bad, #480ca8, #3a0ca3, #3f37c9, #4361ee, #4895ef, #4cc9f0
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

9. Forest Earth

.forest-earth {
  background: linear-gradient(to right, #134e5e, #71b280);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

10. Holographic Silver

.holographic-silver {
  background: linear-gradient(
    135deg,
    #d4d4d8 0%, #a1a1aa 15%, #e4e4e7 30%,
    #71717a 45%, #f4f4f5 60%, #a1a1aa 75%,
    #d4d4d8 90%, #e4e4e7 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: holographic 5s ease infinite;
}

@keyframes holographic {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

11. Common Pitfalls: Selection Color, Accessibility, Print

Gradient text looks great but comes with several gotchas that can hurt usability:

Text Selection Color

When users select gradient text, the selection highlight can clash with the gradient or become invisible. Fix this with ::selection:

/* Fix text selection color for gradient text */
.gradient-text::selection {
  -webkit-text-fill-color: #ffffff;
  background: #3b82f6;
}

.gradient-text::-moz-selection {
  color: #ffffff;
  background: #3b82f6;
}

Accessibility & Contrast

Gradient text can fail WCAG contrast requirements because the contrast ratio varies across the text. Some letters may have sufficient contrast while others do not. Guidelines:

Print Stylesheets

Gradient text does not print. In print stylesheets, the text becomes invisible because -webkit-text-fill-color: transparent persists but the gradient background is stripped. Always add print overrides:

/* Print stylesheet override */
@media print {
  .gradient-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #1a1a2e !important;
    color: #1a1a2e !important;
  }
}

Copy-Paste Behavior

Gradient text copies normally to the clipboard because the underlying text content is unchanged. However, if you use user-select: none on a gradient text container, users cannot copy it. Avoid this unless the text is purely decorative.

Performance on Long Text

Applying gradient backgrounds to very large blocks of text (entire paragraphs or pages) can cause minor rendering overhead. Keep gradient text effects limited to headings and short phrases for best performance.

12. Frequently Asked Questions

Does gradient text work on all browsers?

Yes. The -webkit-background-clip: text technique works in all modern browsers including Chrome, Firefox, Safari, and Edge. The -webkit- prefix is still recommended for maximum compatibility. Unprefixed background-clip: text is supported in Firefox since version 49 and in Chrome/Edge since version 120.

Can I animate CSS gradient text?

Yes, using three approaches: (1) Animate background-position on an oversized gradient using @keyframes — works everywhere. (2) Use CSS @property to register custom properties and animate individual color stops — smoother but requires Chrome 85+, Safari 15.4+, or Firefox 128+. (3) Apply filter: hue-rotate() animation for a simple color-cycling effect.

How do I make gradient text accessible?

Ensure every color in the gradient meets WCAG 2.1 minimum contrast ratios (4.5:1 for normal text, 3:1 for large text) against the background. Test the lightest color in the gradient, not just the darkest. Provide a solid color fallback. Limit gradient text to headings and decorative elements rather than body copy. Use ::selection styles for readable text selection.

Why is my gradient text invisible when I print the page?

Browsers strip background images (including gradients) when printing. Since gradient text relies on background-clip: text with transparent text color, the text disappears on print. Add a @media print rule that resets -webkit-text-fill-color to a solid color and removes the background.

Can I use gradient text with Tailwind CSS?

Yes. Tailwind provides utilities for gradient text: apply bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent to any text element. In Tailwind v4, the syntax uses bg-linear-to-r instead. For animated gradients, add a custom keyframe animation in your Tailwind config.

CSS text gradients are a powerful, performant way to add visual impact to your web designs. With the three-property technique as a foundation, you can create everything from subtle brand-colored headings to animated rainbow effects. Remember to always include fallbacks, test accessibility, and keep gradient effects on short, impactful text.