{}JSJSON

Gradient Art

Multi-layer CSS Gradients & Background Patterns

Template:
Layer 1
%
%
CSS Code
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);

CSS Gradient Guide

Gradient Types

  • linear-gradient() — Gradient along a straight line
  • radial-gradient() — Radial gradient from center outward
  • conic-gradient() — Gradient rotating by angle

Tips

  • Layer multiple gradients for complex patterns
  • Use background-size to control repetition
  • Transparent stops create cutout effects
  • Conic gradients are great for color wheels and dashboards