FREE
CSS gradient generator
Create a two-color linear gradient, preview it and copy the CSS locally.
Use #RGB or #RRGGBB HEX colors and a whole-number angle 0–360°. Two opaque colors; linear gradients only.Gradient preview
Explore toolsCSS gradient generator
Create a two-color linear gradient, preview it and copy the CSS locally.
How to use
- Start color
- End color
- Generate gradient
Copy a linear CSS gradient from two HEX colors
Enter start and end colors as #RGB or #RRGGBB, or use the color pickers. Each raw color input is limited to 32 characters before leading and trailing whitespace is trimmed. HEX letters are case-insensitive; short #RGB is expanded to six lowercase digits: #AbC → #aabbcc. The angle must be a whole number from 0–360°, inclusive; out-of-range values are rejected rather than adjusted. In CSS, 90° runs from left to right. Only two opaque colors and linear gradients are supported; there is no transparency, radial gradient, extra color stop, arbitrary CSS input or image download. Defaults are #155c42, #c7f36b and 90°. Generate gradient applies the preview and produces a complete background declaration; paste the copied CSS line inside a style rule. Any input change invalidates the previous CSS and copy action and returns the preview to neutral; new values apply only after pressing the button. Clear restores defaults, removes output and resets the preview to neutral. Processing is local in your browser; colors and generated CSS are not sent to a server.
Explore toolsWorks instantly
Privacy comes first
Free and simple
New tools every week
✳YOUR TOOLKIT
Tools that get it done.
Nothing you don’t need.
✳LESS FUSS, MORE DONE
Focus on your task,
not finding a tool.
You don’t need a different website for every little task. MiniKit brings the practical tools you use most together in one clear, easy place.
Explore the toolsActually fast
Open it, do the thing, move on. No downloads, sign-up forms or waiting.
Privacy first
Your files and text stay on your device. We don’t store your data.
Simple for everyone
No confusing menus. What you need is right where it should be.
PRIVATE BY DESIGN
Your files get the job
done without passing through us.
Your images, text, QR contents and calculations are processed in your browser. Read our privacy policy for details about hosting, local storage and the current advertising status.
✳Make your next little task
Let’s get startedMake your next little task
a little easier.
Try your first tool now. Free, no account, no fuss.
✳
Example
#155c42 → #c7f36b · 90°
background: linear-gradient(90deg, #155c42 0%, #c7f36b 100%);
Frequently asked questions
Is my input sent to a server?
Your images, text, QR contents and calculations are processed in your browser. Read our privacy policy for details about hosting, local storage and the current advertising status.
Is this tool free?
No account needed · Always free