Linear Gradients: Vectors, Angles, and Striped Patterns

Introduction

Linear gradients are the most common gradient type in modern UI design. Look at SaaS landing pages or SaaS dashboards—you will see linear gradients everywhere: behind hero banners, on button hovers, and even applied directly to text headers to create a glowing metallic or neon effect.

To write high-quality stylesheets, you need to understand how the browser calculates the linear gradient vector, how to set precise degree angles, and how to create unique visual effects like sharp stripes or text gradients.

---

What You Will Learn

• The math behind the linear gradient transition vector.
• Controlling direction using keywords vs. angles (deg).
• Creating sharp striped patterns using Hard Color Stops.
• Styling Text Gradients (text-clipping).
• Implementing repeating linear gradients.

---

Prerequisites

• Gradients: Linear, Radial, and Conic Backdrop Designs

---

Detailed Explanation: Vectors & Angles

A linear gradient transitions along a vector line. The direction of this line can be set in two ways:

---

1. Keyword Directions

You define where the gradient ends using keywords:

• to right (equivalent to 90deg)
• to bottom (default, equivalent to 180deg)
• to top left (diagonal transition)

background: linear-gradient(to right, #3b82f6, #8b5cf6);

---

2. Precise Angles (deg)

For custom directions, specify an angle. 0deg points straight up (representing 12 o'clock), and degrees increase clockwise:

• 90deg points to the right (3 o'clock).
• 180deg points straight down (6 o'clock).
• 270deg points to the left (9 o'clock).

background: linear-gradient(45deg, #3b82f6, #8b5cf6);

---

Hard Color Stops (Creating Stripes)

Normally, colors blend smoothly. However, if you assign two colors to the same coordinate percentage, the transition is instant, creating a sharp line:

/* Creates sharp striped bands of blue and red at 50% boundary */
background: linear-gradient(to right, #3b82f6 50%, #ef4444 50%);

---

Text Gradients (The Clip Hack)

Applying a gradient to text requires clipping the background layer to the shape of the text letters, and making the actual text transparent:

.gradient-text {
  background: linear-gradient(to right, #38bdf8, #8b5cf6);
  -webkit-background-clip: text; /* Clips background to text letters */
  -webkit-text-fill-color: transparent; /* Makes text transparent */
}

---

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Linear Gradient Angles
    0d[0deg: Bottom to Top] --> 90d[90deg: Left to Right]
    90d --> 180d[180deg: Top to Bottom]
    180d --> 270d[270deg: Right to Left]
    end

---

Code Examples

Example 1: Sleek Text Gradient Header

Make your landing page headers look premium:

<h1 class="hero-title">
  Supercharge Your <span class="accent-text">AI Career</span>
</h1>

.hero-title {
  font-size: 48px;
  font-weight: 800;
  color: #ffffff;
}

.accent-text {
  /* Dynamic gradient blend */
  background: linear-gradient(90deg, #38bdf8 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

Example 2: Repeating Diagonal Stripes

Create a warning stripe pattern using repeating-linear-gradient:

.alert-warning-stripe {
  height: 20px;
  /* Repeats every 20px along a 45deg angle */
  background: repeating-linear-gradient(
    45deg,
    #facc15,       /* Yellow */
    #facc15 10px,
    #0f172a 10px,  /* Dark slate */
    #0f172a 20px
  );
}

---

Summary

Linear gradients blend colors along straight vector coordinates directed by keywords or degree angles. By adjusting color stops, developers can generate smooth blends, hard-striped borders, or mask text characters using background clipping properties to output glowing typography components.

---

Related Articles

• Gradients
• Radial Gradients

Next Tutorial

How do we create circular and elliptical color transitions radiating from a central coordinate? Let's check: Radial Gradients.