Background Preview
Customize Gradient
90°
background: linear-gradient(90deg, #3B82F6, #9333EA);
The Power of CSS Gradients
Gradients allow you to display smooth transitions between two or more specified colors. They are computationally efficient compared to using image files for backgrounds and are infinitely scalable without quality loss.
Types of Gradients
- Linear: Colors flow in a single direction (e.g., top to bottom, or at 45 degrees). This is the most common type used for buttons and hero sections.
- Radial: Colors radiate outward from a central point. This can create a glowing effect or draw attention to the center of an element.
FAQ: Gradient Common Questions
Are CSS gradients bad for SEO?
No. Search engines ignore styling. However, using CSS gradients instead of large background images improves page load speed, which is a ranking factor.
How many colors can I use?
Our simple tool supports 2 colors for ease of use, but CSS supports unlimited color stops. You can manually add more by editing the generated code (e.g., linear-gradient(90deg, red, blue, green)).
What is the 'transparent' color?
You can fade a color into transparency (e.g., rgba(255,0,0,0)). This is useful for overlaying text on images.