CSS Gradient Generator
Free online CSS gradient generator tool, real-time preview
CSS Gradient Types
Linear gradients transition colors along a straight line defined by an angle or direction. Radial gradients transition from a center point outward in a circular or elliptical shape. Both support multiple color stops for complex transitions between three or more colors.
How to Create a CSS Gradient
Select gradient type (linear or radial), choose start and end colors, and adjust the angle for linear gradients. The tool generates the CSS code instantly. Copy the CSS and paste it into your stylesheet as a background or background-image property.
▶Can I use more than two colors in a gradient?
Yes, CSS gradients support unlimited color stops. Add additional colors by modifying the generated CSS code with extra color values separated by commas.
▶What is the browser support for CSS gradients?
CSS gradients are supported in all modern browsers. For older browsers, you may need vendor prefixes (-webkit-gradient) or a solid fallback color.
▶Can I use transparency in gradients?
Yes. Use rgba() or hsla() color values to include transparency. For example, linear-gradient(135deg, rgba(255,0,0,0.5), transparent) creates a semi-transparent red gradient.
If this tool helped you, consider buying the author a coffee.
Buy Me a Coffee