← Back to all tools
Goodfolk Design Utilities
CSS Gradient Generator
Create a linear CSS gradient, preview it, and copy ready-to-use CSS.
Preview
#3B82F6 → #9333EA
Use this for buttons, hero backgrounds, cards, badges, or quick UI experiments.
Gradient CSS
CSS background
background: linear-gradient(135deg, #3B82F6 0%, #9333EA 100%);
Gradient value
linear-gradient(135deg, #3B82F6 0%, #9333EA 100%)
Paste the background rule into a CSS class, inline style, or design prototype.
Related tools
HEX Color Converter
Convert HEX colors to RGB and HSL, preview the color, and copy CSS-friendly values.
Color Contrast Checker
Check contrast between text and background colors and see basic WCAG-style pass/fail guidance.
Color Palette Generator
Generate color palettes from a base color, lock favorite colors, and copy HEX values or CSS variables.