CSS Gradient Generator
Free CSS gradient generator. Pick two colours, choose linear (with angle) or radial, and copy clean modern CSS gradient code with a solid-colour fallback.
About the CSS Gradient Generator
A CSS gradient generator that lets you build linear and radial gradients visually. It produces clean, modern CSS with a solid-color fallback for older browsers.
This generator writes the CSS gradient code for you: choose your two colours, pick linear or radial, set the angle, and copy a clean background declaration ready to paste into any stylesheet. Gradients are back — subtle two-tone backgrounds on hero sections, buttons and cards are one of the defining looks of modern interfaces, and CSS renders them natively with no image files.
The linear angle follows CSS convention: 0° points the gradient upward (start colour at the bottom), 90° points right, and the popular 135° runs diagonally from top-left to bottom-right — the default here because it flatters most layouts. Radial gradients bloom from the centre outward, suited to spotlight effects and circular elements. The output also includes a solid-colour fallback line, so ancient browsers that predate gradient support show your start colour rather than nothing.
Two colours make a gradient; taste makes it a good one. Neighbouring hues (indigo to violet, teal to blue) blend smoothly, while opposites can meet in a muddy grey midpoint — if you want a bold two-colour statement, pick colours that share some undertone. Keeping both stops at similar lightness avoids the washed-out band in the middle. For text overlays, check contrast against both ends of the gradient, not just one. If you need a hand relating colours, the colour converter next door shows every colour's hue/saturation/lightness so you can pick companions deliberately.
How to use the CSS Gradient Generator
- Select your starting and ending colors (hex format).
- Choose the gradient type: Linear or Radial.
- If Linear, adjust the angle (e.g., 135° for diagonal).
- Click 'Generate CSS' and copy the resulting code.
Worked example
Pick #4f46e5 (start) and #9333ea (end), choose 'Linear' at 135 degrees, and get `background: linear-gradient(135deg, #4f46e5, #9333ea);`.
Frequently asked questions
- How do gradient angles work in CSS?
- The angle is the direction the gradient travels: 0° points up, 90° right, 180° down. 135° — top-left toward bottom-right — is the most common choice for backgrounds.
- Can I use more than two colours?
- CSS supports any number of colour stops — take the generated code and add more comma-separated stops with percentages, e.g. linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #ec4899 100%).
- Why does the middle of my gradient look grey?
- Colours far apart on the colour wheel pass through desaturated territory when interpolated. Choose closer hues, or add a vivid intermediate colour stop at 50%.
- What is the solid color fallback for?
- Older or specialized browsers that don't support CSS gradients will ignore the gradient rule. The solid fallback ensures your background is still visible and readable.
- Does this generate cross-browser prefixes?
- Modern browsers support standard CSS gradients natively, so vendor prefixes (-webkit-, -moz-) are generally no longer required for basic gradients.
More from Avexora
All Avexora products →Business software from the team behind these free tools.
- CRM
Avexora AI CRM
A CRM and project workspace for growing businesses.
Visit Avexora AI CRM - WhatsApp Business API
AvexWA
WhatsApp Business API platform for broadcasts, chatbots and automation.
Visit AvexWA - AI business ecosystem
Avexora AI EBOS
From a blank page to a live funnel in minutes.
Visit Avexora AI EBOS - Enterprise AI
Avexora AI
Enterprise-grade AI systems for operations and growth.
Visit Avexora AI - AI voice calling
Avexora AI Voice Agents
Your business phone, answered by AI in every language, every hour.
Visit Avexora AI Voice Agents - OMR exam software
Avexora ExamOS
AI-powered OMR scanning and exam management for schools.
Visit Avexora ExamOS
Related tools
Free color converter. Paste a colour as HEX, RGB or HSL and instantly get all three formats — perfect for CSS, design handoffs and brand palettes.
Favicon GeneratorFree favicon generator. Upload a logo image and get a complete set of favicon PNGs at every standard size, plus the HTML snippet to add them to your site.
Meta Tag GeneratorFree meta tag generator. Create a complete HTML head block with title, meta description, canonical, Open Graph and Twitter Card tags in seconds.
Image Color PickerFree image color picker. Click any point on an image to instantly get its hex and RGB colour value — entirely in your browser, no upload required.