Skip to main content
Tovlix
Design

CSS Gradient Backgrounds: Complete Guide With Free Generator

Master CSS gradients with this complete guide covering linear, radial, and conic gradients. Includes code examples, design tips, and a free CSS gradient generator tool.

February 10, 202611 min readBy Tovlix Team

# CSS Gradient Backgrounds: Complete Guide With Free Generator


CSS gradients replace flat backgrounds with smooth color transitions that add depth and visual interest to web pages. They're lightweight (no image files needed), infinitely scalable, and easy to customize. This guide covers every type of CSS gradient with code examples you can copy and use immediately.


Types of CSS Gradients


CSS supports three gradient types:


  • Linear gradients - — Colors transition along a straight line
  • Radial gradients - — Colors radiate outward from a center point
  • Conic gradients - — Colors rotate around a center point

    • Each type has unique properties and use cases.


    Linear Gradients


    Linear gradients are the most common. Colors blend along a line from one direction to another.


    Basic Syntax


    background: linear-gradient(direction, color1, color2, ...);

    Direction Options


    By keyword:

    /* Top to bottom (default) */
background: linear-gradient(to bottom, #6366f1, #ec4899);

/* Left to right */
background: linear-gradient(to right, #6366f1, #ec4899);

/* Diagonal */
background: linear-gradient(to bottom right, #6366f1, #ec4899);

    By angle:

    /* 0deg = bottom to top */
background: linear-gradient(0deg, #6366f1, #ec4899);

/* 90deg = left to right */
background: linear-gradient(90deg, #6366f1, #ec4899);

/* 135deg = top-left to bottom-right */
background: linear-gradient(135deg, #6366f1, #ec4899);

/* 45deg = bottom-left to top-right */
background: linear-gradient(45deg, #6366f1, #ec4899);

    Multiple Color Stops


    You can add as many colors as you want:


    /* Three colors */
background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);

/* With specific positions */
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);

/* Uneven distribution */
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 30%, #ec4899 100%);

    Creating Hard Color Stops


    For sharp transitions instead of smooth blends:


    /* Sharp split at 50% */
background: linear-gradient(90deg, #6366f1 50%, #ec4899 50%);

/* Three-stripe flag effect */
background: linear-gradient(
  90deg,
  #ff0000 33.3%,
  #ffffff 33.3%,
  #ffffff 66.6%,
  #0000ff 66.6%
);

    Radial Gradients


    Radial gradients create circular or elliptical color transitions that radiate from a center point.


    Basic Syntax


    background: radial-gradient(shape size at position, color1, color2, ...);

    Shape Options


    /* Circle */
background: radial-gradient(circle, #6366f1, #ec4899);

/* Ellipse (default) */
background: radial-gradient(ellipse, #6366f1, #ec4899);

    Size Keywords


    /* Closest side */
background: radial-gradient(circle closest-side, #6366f1, #ec4899);

/* Farthest corner (default) */
background: radial-gradient(circle farthest-corner, #6366f1, #ec4899);

/* Closest corner */
background: radial-gradient(circle closest-corner, #6366f1, #ec4899);

/* Farthest side */
background: radial-gradient(circle farthest-side, #6366f1, #ec4899);

    Positioning


    /* Centered (default) */
background: radial-gradient(circle at center, #6366f1, #ec4899);

/* Top left */
background: radial-gradient(circle at top left, #6366f1, #ec4899);

/* Specific position */
background: radial-gradient(circle at 30% 70%, #6366f1, #ec4899);

    Radial Gradient Use Cases


  • Spotlight effects: - Light circle on dark background
  • Button hover states: - Subtle radial glow
  • Background accents: - Soft circles as decorative elements

    • Conic Gradients


    Conic gradients rotate colors around a center point, like a color wheel.


    Basic Syntax


    background: conic-gradient(from angle at position, color1, color2, ...);

    Examples


    /* Basic color wheel */
background: conic-gradient(#ff0000, #ff8800, #ffff00, #00ff00, #0000ff, #8800ff, #ff0000);

/* Pie chart effect */
background: conic-gradient(
  #6366f1 0% 40%,
  #ec4899 40% 70%,
  #10b981 70% 100%
);

/* Starting from a specific angle */
background: conic-gradient(from 90deg, #6366f1, #ec4899, #6366f1);

    Conic Gradient Use Cases


  • Pie charts - without JavaScript libraries
  • Loading spinners - with animated rotation
  • Decorative backgrounds - with sweeping color effects

    • Gradient Design Patterns


    Gradient Text


    .gradient-text {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

    This clips the gradient to the text shape, creating colorful text without images.


    Gradient Borders


    .gradient-border {
  border: 3px solid transparent;
  background-image: linear-gradient(white, white),
                     linear-gradient(135deg, #6366f1, #ec4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

    Gradient Overlay on Images


    .image-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 100%
  ), url('image.jpg');
  background-size: cover;
}

    This creates a dark gradient overlay on the bottom of an image — useful for placing text over photos.


    Animated Gradients


    .animated-gradient {
  background: linear-gradient(-45deg, #6366f1, #ec4899, #10b981, #f59e0b);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

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

    Repeating Gradients


    /* Repeating stripes */
background: repeating-linear-gradient(
  45deg,
  #6366f1,
  #6366f1 10px,
  #8b5cf6 10px,
  #8b5cf6 20px
);

/* Repeating radial pattern */
background: repeating-radial-gradient(
  circle at center,
  #6366f1,
  #6366f1 10px,
  #ec4899 10px,
  #ec4899 20px
);

    Popular Gradient Color Combinations


    Here are gradient combinations commonly used in modern web design:


    NameColorsCSS
    SunsetOrange to pinklinear-gradient(135deg, #f97316, #ec4899)
    OceanBlue to teallinear-gradient(135deg, #3b82f6, #14b8a6)
    ForestGreen to emeraldlinear-gradient(135deg, #22c55e, #10b981)
    RoyalPurple to indigolinear-gradient(135deg, #8b5cf6, #6366f1)
    FireRed to yellowlinear-gradient(135deg, #ef4444, #f59e0b)
    MidnightDark blue to purplelinear-gradient(135deg, #1e3a5f, #7c3aed)
    Cotton CandyPink to light bluelinear-gradient(135deg, #ec4899, #67e8f9)

    Performance Considerations


    CSS gradients are rendered by the browser — no image files are needed. This means:


  • Zero HTTP requests - (unlike background images)
  • Infinitely scalable - without quality loss
  • Smaller file size - than equivalent images
  • Easy to modify - without design tools

    • However, very complex gradients with many color stops or animated gradients can impact rendering performance on low-powered devices. Keep animations smooth by using `transform` and `opacity` when possible.


    Browser Support


    All modern browsers support linear and radial gradients. Conic gradients are supported in all major browsers since 2020. For older browser support, provide a solid color fallback:


    .gradient-bg {
  background: #6366f1; /* Fallback */
  background: linear-gradient(135deg, #6366f1, #ec4899);
}

    Free CSS and Design Tools


    Create stunning gradients and styles with these free Tovlix tools:


  • CSS Gradient Generator - Visual gradient builder with CSS code
  • Color Palette Generator - Find complementary colors for gradients
  • Box Shadow Generator - Pair gradients with shadow effects
  • CSS Flexbox Generator - Layout tools for gradient containers
  • CSS Grid Generator - Grid layouts for gradient backgrounds
  • Color Converter - Convert between HEX, RGB, and HSL

    • Conclusion


    CSS gradients are a powerful tool for adding visual depth to web designs without images. Start with linear gradients for backgrounds and buttons, use radial gradients for spotlight effects, and experiment with conic gradients for decorative elements. Combine gradients with text clipping, borders, and animations for advanced effects. Use our free CSS Gradient Generator to visually create gradients and copy the CSS code directly into your projects.


    cssgradientweb designcss gradientlinear gradientbackgroundfrontend

    Try Our Free Tools

    Generate passwords, QR codes, invoices, and 200+ more tools - completely free!

    Explore All Tools