CSS Gradients
CSS Gradients — Create stunning gradient effects with linear, radial, conic, and repeating gradients for backgrounds and more. The guide walks through Linear Gradients, Radial and Conic Gradients, Repeating Gradients, Gradient Patterns and Effects. Linear gradients transition colors along a straight line. Basic syntax: .element { background: linear-gradient(direction, color1, color2, ...); } Direction options: .element { background: linear-gradient(red, blue); } /* Top to bottom (default) */ .element { background: linear-gradient(to right, red, blue); } /* Left to right */ .element { background: linear-gradient(45deg, red, blue); } /* 45 degree angle */ Multiple color stops:… Radial gradients radiate from a central point: Basic syntax: .element { background: radial-gradient(shape size at position, color1, color2); } .element { background: radial-gradient(circle, #6366f1, #4338ca); } .element { background: radial-gradient( ellipse at center, #fff 0%, #6366f1 50%, #1a1a2e 100% ); } Conic gradients rotate around a center point: .element { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); } Color…