CSS Gradient Cheat Sheet
This one-page CSS gradient cheat sheet is for designers and developers who need a quick reference while building backgrounds and color transitions. It lists gradient patterns in two columns, Pattern and CSS, with simple examples for Linear using linear-gradient(135deg, #a 0%, #b 100%), Radial using radial-gradient(circle at 50% 50%, #a, #b), and Conic using conic-gradient(from 0deg at 50% 50%, #a, #b).
Free printable · PDF
- 1 page
- US Letter — choose “Fit to page” for A4
- PDF, 56 KB
Free for personal, family and classroom use.
Need to edit it? The full pack has the editable Excel and Word files plus all 4 sheets — $5.00, one-time.
Your free PDF is downloading. Want all 4 sheets in one download, plus the editable Excel and Word files so you can change the text?
Instant download · 7-day refund · Secure checkout by Stripe
Use it beside your editor when you want the basic syntax in front of you without searching through docs. Print it, keep it near your desk, or save it on your device so you can copy the right gradient pattern and adjust the angle, shape, or color stops as needed.
Good for
- Quick CSS background reference
- Copy gradient syntax into stylesheets
- Check linear, radial, and conic formats
Tip: Print at Letter size and keep it near your monitor for quick copy-and-paste reference.
4 files · PDF, XLSX, DOCX
Get every sheet: CSS Gradient Reference Pack
This sheet plus 3 more in one download, with the editable Excel and Word files. Printable CSS gradient cheat sheet, 24 ready-made gradient palettes with hex codes, an accessibility contrast checklist and a design token template.
$5.00 USD, one-time 4 files · about $1.25 each
- Instant download
- 7-day refund
- Secure checkout by Stripe
7-day money-back guarantee. Full refund within 7 days of purchase, even after you download.
More free printables
Printable Gradient Palette Reference Sheet2 pages · free PDF
Printable Gradient Accessibility ChecklistOne-page gradient accessibility checklist for checking contrast, readability, and clarity in CSS background gradients.1 page · free PDF
Gradient Design Token TemplateLetter landscape gradient token sheet with columns for token name, CSS value, use, text colour, and contrast.1 page · free PDF