Gradient Chéo (Diagonal) trong CSS3

Giới thiệu

Gradient Diagonal (chéo) chuyển màu theo đường chéo qua các góc. Có 2 hướng chính: Top-left → Bottom-right (45deg) và Bottom-left → Top-right (135deg / -45deg).

Cú pháp

/* Top-left → Bottom-right (45deg) */
background: linear-gradient(to bottom right, red, blue);
background: linear-gradient(45deg, red, blue);
background: linear-gradient(135deg, blue, red);  /* Ngược chiều */

/* Bottom-left → Top-right (135deg) */
background: linear-gradient(to top right, red, blue);
background: linear-gradient(-45deg, red, blue);
background: linear-gradient(315deg, red, blue);

Ví dụ: Top-left → Bottom-right (Red → Blue)

<!DOCTYPE html>
<html>
<head>
  <style>
    #grad1 {
      height: 100px;
      width: 100%;
      background: -webkit-linear-gradient(left top, red, blue);      /* Safari cũ */
      background: -o-linear-gradient(bottom right, red, blue);       /* Opera cũ */
      background: -moz-linear-gradient(bottom right, red, blue);     /* Firefox cũ */
      background: linear-gradient(to bottom right, red, blue);       /* Chuẩn */
    }
  </style>
</head>
<body>
  <div id="grad1"></div>
  <p>Gradient chéo: Đỏ (góc trên trái) → Xanh (góc dưới phải)</p>
</body>
</html>

Góc độ phổ biến cho Diagonal

Color Stops cho Diagonal

/* 3 màu chéo */
linear-gradient(45deg, red 0%, yellow 50%, blue 100%)

/* Stripe chéo (hard stops) */
linear-gradient(45deg, 
  #fff 0%, #fff 25%, 
  transparent 25%, transparent 50%,
  #fff 50%, #fff 75%,
  transparent 75%, transparent 100%
)

/* Background-pattern stripe chéo */
repeating-linear-gradient(45deg,
  transparent, transparent 10px,
  rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px
)

Ứng dụng thực tế

• Stripe pattern: Background nhẹ nhàng cho card, section
• Button hover: Diagonal sweep effect
• Loading shimmer: repeating-linear-gradient + animation
• Decorative divider: Đường chéo tách section
• Half-half layout: linear-gradient(45deg, color1 50%, color2 50%)

Ví dụ: Shimmer Loading (Diagonal)

<style>
  .shimmer {
    background: linear-gradient(
      90deg,
      #f0f0f0 25%,
      #e0e0e0 50%,
      #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }
  @keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }
  
  /* Diagonal shimmer */
  .shimmer-diagonal {
    background: repeating-linear-gradient(
      45deg,
      #f0f0f0 0, #f0f0f0 10px,
      #e0e0e0 10px, #e0e0e0 20px
    );
    background-size: 40px 40px;
    animation: shimmer-diag 1s linear infinite;
  }
  @keyframes shimmer-diag {
    from { background-position: 0 0; }
    to   { background-position: 40px 40px; }
  }
</style>