CSS Gradients Cheatsheet
š CSS Gradients Cheatsheet
Quick guide to gradient types and usage ā learn linear, repeating, radial and conic gradients with visual examples.
ā Gradient basics ā linear-gradient() ā repeating-linear-gradient() ā radial-gradient() ā conic-gradient()
#CSS #WebDev #Gradients #Design
Gradient basics
Gradients are image values and can be used anywhere images are allowed (background, background-image, mask-image, etc.).
linear-gradient()
Create a gradient along a straight line.
linear-gradient([<angle> | to <side-or-corner>], <color-stop> [, <color-stop>]+)linear-gradient(45deg, #06b6d4, #7c3aed)
linear-gradient(90deg, #06b6d4, #7c3aed)
linear-gradient(180deg, #06b6d4, #7c3aed)
linear-gradient(to right, #06b6d4, #7c3aed)
linear-gradient(to right bottom, #06b6d4, #7c3aed)
linear-gradient(135deg, #06b6d4 0%, #7c3aed 50%, #f472b6 100%)
repeating-linear-gradient()
Repeat a linear gradient pattern.
repeating-linear-gradient(45deg, #e2e8f0 0 8px, transparent 8px 16px)
repeating-linear-gradient(90deg, #e2e8f0 0 6px, transparent 6px 12px)
repeating-linear-gradient(135deg, #7c3aed 0 10px, #06b6d4 10px 20px)
radial-gradient()
Expands outward from a center. Syntax:
radial-gradient([<shape> || <size>] [at <position>], <color-stop>[, <color-stop>]+)radial-gradient(ellipse at center, #06b6d4 0%, #7c3aed 60%)
radial-gradient(circle at 20% 80%, #f472b6 0%, transparent 50%)
conic-gradient()
Angular gradients rotating around a point. Good for pies, progress rings and angular color transitions.
radial-gradient([<shape> || <size>] [at <position>], <color-stop>[, <color-stop>]+)conic-gradient(from 90deg, #06b6d4, #7c3aed, #f472b6)
conic-gradient(at 30% 30%, #7c3aed 0 30%, #06b6d4 30% 70%, transparent 70% 100%)