Article Categories

Selected Reading

Setting Direction of Linear Gradients using Angles in CSS

CSS Web Development Front End Technology

For more control over the direction of the gradient, define angle under the linear-gradient() method of the background-image property. This gives more control over the gradient direction −

Value 0deg is the "to top" direction
Value 90deg is the "to right" direction
Value 180deg is the "to bottom" direction
Value 270deg is the "to left" direction

Syntax

background-image: linear-gradient(angle, color-stop1, color-stop2);

Example: Basic Linear Gradient with Angles

The following example demonstrates how to set the direction of linear gradients using angles −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin: 20px;
    }
    
    .gradient-box {
        height: 150px;
        width: 200px;
        display: inline-block;
        margin: 10px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 150px;
        color: white;
        font-weight: bold;
    }
    
    .gradient-90deg {
        background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow);
    }
    
    .gradient-negative-90deg {
        background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow);
    }
    
    .gradient-45deg {
        background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    }
    
    .gradient-180deg {
        background-image: linear-gradient(180deg, #667eea, #764ba2);
    }
</style>
</head>
<body>
    <h2>Linear Gradients with Different Angles</h2>
    
    <div class="gradient-box gradient-90deg">90deg</div>
    <div class="gradient-box gradient-negative-90deg">-90deg</div>
    <div class="gradient-box gradient-45deg">45deg</div>
    <div class="gradient-box gradient-180deg">180deg</div>
</body>
</html>

Four rectangular boxes appear with different gradient directions:
- First box: Pink to yellow gradient flowing left to right (90deg)
- Second box: Pink to yellow gradient flowing right to left (-90deg)  
- Third box: Red to teal gradient flowing diagonally (45deg)
- Fourth box: Purple to blue gradient flowing top to bottom (180deg)

Example: Country Flag Gradients with Color Stops

This example creates flag-like patterns using linear gradients with specific color stops −

<!DOCTYPE html>
<html>
<head>
<style>
    .flag {
        width: 300px;
        height: 200px;
        margin: 20px;
        border: 2px solid black;
        text-align: center;
        line-height: 200px;
        font-size: 20px;
        font-weight: bold;
    }
    
    .spain-flag {
        background-image: linear-gradient(0deg, red 25%, yellow 25%, yellow 75%, red 75%);
        color: black;
    }
    
    .italy-flag {
        background-image: linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
        color: black;
    }
    
    .germany-flag {
        background-image: linear-gradient(0deg, black 33.3%, red 33.3%, red 66.6%, yellow 66.6%);
        color: white;
    }
</style>
</head>
<body>
    <h2>Flag Patterns using Linear Gradients</h2>
    
    <div class="flag spain-flag">Spain</div>
    <div class="flag italy-flag">Italy</div>
    <div class="flag germany-flag">Germany</div>
</body>
</html>

Three rectangular boxes appear representing flag patterns:
- Spain: Horizontal red-yellow-red stripes
- Italy: Vertical green-white-red stripes  
- Germany: Horizontal black-red-yellow stripes

Example: Linear Gradient Overlay on Background Image

This example demonstrates combining a linear gradient with a background image to create an overlay effect −

<!DOCTYPE html>
<html>
<head>
<style>
    .hero-container {
        height: 400px;
        background-image: 
            linear-gradient(45deg, rgba(30, 144, 255, 0.7), rgba(255, 20, 147, 0.7)),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' fill='%23ddd'%3E%3Crect width='200' height='200'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' font-size='18'%3EImage Placeholder%3C/text%3E%3C/svg%3E");
        background-position: center;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-align: center;
    }
    
    .hero-content {
        background: rgba(0, 0, 0, 0.3);
        padding: 30px;
        border-radius: 10px;
    }
    
    .hero-content h1 {
        margin: 0 0 10px 0;
        font-size: 2.5em;
    }
    
    .hero-content p {
        margin: 0 0 20px 0;
        font-size: 1.2em;
    }
    
    .hero-button {
        background: #28a745;
        color: white;
        border: none;
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
    }
    
    .hero-button:hover {
        background: #218838;
    }
</style>
</head>
<body>
    <div class="hero-container">
        <div class="hero-content">
            <h1>Welcome</h1>
            <p>Gradient overlay on background image</p>
            <button class="hero-button">Learn More</button>
        </div>
    </div>
</body>
</html>

A large rectangular hero section appears with a diagonal blue-to-pink gradient overlay on a placeholder background image. Centered white text and a green button are displayed over the gradient overlay.

Conclusion

Using angles in linear gradients provides precise control over gradient direction. Positive angles rotate clockwise from 0deg (top), while negative angles rotate counterclockwise. Combine gradients with color stops to create complex patterns and overlay effects.

AmitDiwan

Updated on: 2026-03-15T15:05:49+05:30

408 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next