CSS Tutorial

The language for styling web pages.

CSS Gradients

CSS gradients let you display smooth transitions between two or more specified colors. CSS defines three types of gradients.

Types of Gradients:

Linear Gradient - Colors transition in a straight line
Radial Gradient - Colors radiate from a center point
Conic Gradient - Colors rotate around a center point

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
<style>
  div { height:80px; border-radius:10px; margin:10px 0; display:flex; align-items:center; justify-content:center; color:white; font-weight:bold; font-family:Arial; }
  .g1 { background: linear-gradient(to right, #1572B6, #33c8ff); }
  .g2 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
  .g3 { background: linear-gradient(to right, #f093fb, #f5576c); }
  .g4 { background: linear-gradient(to right, #1572B6, #28a745, #dc3545, #ffc107); }
  .g5 { background: radial-gradient(circle, #1572B6, #1a1a2e); }
  .g6 { background: conic-gradient(red, yellow, green, blue, red); border-radius:50%; width:80px; height:80px; margin:auto; }
</style>
</head>
<body>
  <div class="g1">Linear → (to right)</div>
  <div class="g2">Linear ↘ (135deg)</div>
  <div class="g3">Linear Pink to Red</div>
  <div class="g4">Multi-color Linear</div>
  <div class="g5">Radial Gradient</div>
  <div class="g6"></div>
  <p style="text-align:center;font-family:Arial;font-size:13px;">↑ Conic Gradient (circle)</p>
</body>
</html>

Result

Topics

CSS Introduction CSS Syntax CSS Selectors CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Box Model CSS Text CSS Fonts CSS Display CSS Position CSS Flexbox CSS Grid CSS Transitions CSS Animations CSS Media Queries CSS Variables CSS Gradients CSS Shadows CSS 2D Transforms CSS 3D Transforms CSS Pseudo-classes CSS Pseudo-elements CSS Float CSS Overflow CSS Z-index CSS Opacity CSS Buttons

CSS Tutorial

Course Topics

CSS Gradients

CSS Gradients

Types of Gradients:

Try It Yourself

Topics