CSS Gradient Types Explained: Linear, Radial, and Conic


CSS gradients are powerful tools that allow you to create smooth transitions between colors without using images. Understanding the different types of gradients and their syntax is essential for modern web design.


Linear Gradients


Linear gradients transition colors along a straight line. They're the most commonly used gradient type.


Basic Syntax


The basic syntax for a linear gradient is:


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


Direction Options


You can specify the direction using angles or keywords:


  • **Angles**: 0deg (bottom to top), 90deg (left to right), 180deg (top to bottom)
  • **Keywords**: to top, to right, to bottom left, etc.

  • Examples


    A simple two-color gradient from left to right:


    background: linear-gradient(90deg, #ff6b6b, #4ecdc4);


    A diagonal gradient with multiple colors:


    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);


    Radial Gradients


    Radial gradients emanate from a central point outward in a circular or elliptical pattern.


    Basic Syntax


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


    Shape Options


  • **circle**: Creates a perfectly round gradient
  • **ellipse**: Creates an oval gradient (default)

  • Size Keywords


  • **closest-side**: Gradient ends at the closest side
  • **farthest-corner**: Gradient extends to the farthest corner (default)
  • **closest-corner** and **farthest-side** are also available

  • Examples


    A circular gradient centered:


    background: radial-gradient(circle, #fff, #000);


    An elliptical gradient positioned in the top-left:


    background: radial-gradient(ellipse at top left, #ff9a9e, #fecfef);


    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, ...);


    Use Cases


  • Pie charts
  • Color wheels
  • Decorative elements
  • Loading spinners

  • Examples


    A simple conic gradient:


    background: conic-gradient(#ff6b6b, #4ecdc4, #45b7d1, #ff6b6b);


    A pie chart effect:


    background: conic-gradient(#ff6b6b 0deg 120deg, #4ecdc4 120deg 240deg, #45b7d1 240deg);


    Color Stops


    All gradient types support color stops, which let you control where each color appears.


    Percentage-Based Stops


    background: linear-gradient(90deg, red 0%, yellow 50%, green 100%);


    Hard Stops (No Transition)


    Create sharp color boundaries by using the same position for adjacent colors:


    background: linear-gradient(90deg, red 50%, blue 50%);


    Browser Support


    CSS gradients are well-supported in all modern browsers. However, for older browsers, always provide a fallback solid color:


    background: #667eea;

    background: linear-gradient(90deg, #667eea, #764ba2);


    Conclusion


    Understanding the three types of CSS gradients opens up endless creative possibilities. Use GradientSpark to experiment with different combinations and find the perfect gradient for your project.

    Ready to create your own gradients?

    Try GradientSpark and design beautiful CSS gradients instantly.

    Try GradientSpark Free