Printable Gradient Palette Reference Sheet
This two-page Letter landscape sheet is for anyone building CSS gradients and needing ready-made palette ideas. It includes a table of gradient palettes with columns for Name, Stop 1, Stop 2, Stop 3, and Angle. Example rows include Sunset, Ocean, and Forest, each with hex color stops and a direction value. The sheet also notes that the palettes are generated and should be checked for text contrast.
Free printable · PDF
- 2 pages
- US Letter, landscape — choose “Fit to page” for A4
- PDF, 59 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 as a quick reference while planning background styles, hero sections, buttons, or cards. Compare the color stops and angles, then copy the hex values into your CSS gradient code. Print it for desk use or keep it open on screen while you test combinations in your design file or browser.
Good for
- Pick gradient stops for CSS background styles
- Check angle values for direction setup
- Compare palette contrast before adding text
Tip: Print in landscape so the table stays easy to read.
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
CSS Gradient Cheat Sheet1 page · 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