Create a linear CSS gradient from two colors and an angle. Use the declaration as a background for a section, card, or button.
How to use
Choose the start and end colors. Set an angle from 0 to 360, generate the result, and paste the background declaration into your stylesheet.
Example
An angle of 90 runs toward the right. An angle of 180 runs downward, so the same colors produce a different visual direction.
FAQ
Can I add more color stops?
This generator uses two colors. Add intermediate stops manually in CSS when you need a more detailed transition.
Related tools
A practical task
Choose the two endpoint colors before adjusting angle. Test text over the brightest and darkest parts of the background, not only its center. A gradient that looks balanced as an empty swatch can make a heading unreadable near one edge.
Another useful question
Does the gradient change the element's size?
No. It sets a background declaration. The element still needs dimensions, padding, and layout rules in the stylesheet where you use it.
Settings and formats
| Field | Values |
|---|---|
| Start color | Starting value: #2196f3 |
| End color | Starting value: #e91e63 |
| Angle | Starting value: 90; bounds: 0 / 360 |
Details for interpreting the result
| Detail | Explanation |
|---|---|
| CSS cascade | The same selector can appear more than once for a reason. Order, specificity, media queries, and inheritance all affect the result. A shorter or neater stylesheet still needs a check in its actual page. |
| Color contrast | A foreground and background need enough contrast for readable text. Attractive colors do not automatically produce accessible combinations. Check the intended font size, text weight, and actual background together. |
| RGB channels | RGB describes red, green, and blue light channels. In the common integer form, each runs from 0 through 255. A six digit HEX value represents the same three channels as two hexadecimal digits per channel. |
| HSL values | HSL separates hue, saturation, and lightness. It is useful for describing variations of one color, but the lightness percentage is not a direct measure of perceived contrast or accessibility. |
| Transparency and background | A partly transparent color is combined with what sits behind it. The same translucent value can look different on white, black, or an image. Evaluate the final combination instead of the foreground value alone. |
| Preview boundaries | A restricted preview can block scripts, external images, fonts, and other resources. That keeps the preview separate from active page behavior, but it also means it is not a faithful copy of every production layout. |