🌈 Gradient Generator
Build a CSS linear gradient and copy the code
About the Gradient Generator
CSS gradients are one of the most versatile styling tools in modern web design. A gradient generator lets you create smooth transitions between colors visually and then copy the exact CSS code to use in any stylesheet. No more guessing hex codes or mentally modeling how angle and color stop positions interact.
Linear gradients flow in a straight line from one color to another, at an angle you control. The CSS linear-gradient function accepts a direction (like to right, to bottom right, or a degree value like 135deg) followed by two or more color stops. Each stop defines a color and optionally a position along the gradient axis, giving you fine control over where transitions happen.
Multi-color gradients are where things get interesting. You can add additional color stops to create sunsets, ocean fades, brand color progressions, or abstract effects. The position of each stop, expressed as a percentage of the total gradient length, controls how quickly or gradually the transition happens. Stops placed close together create sharp transitions while stops spread apart produce smooth blends.
Gradients have become a significant part of contemporary UI design, used in hero backgrounds, button states, card overlays, and text effects. They were once considered a dated aesthetic associated with the skeuomorphic web design era, but modern use of subtle, sophisticated gradients has fully rehabilitated them as a respected design choice.
The generated CSS output is ready to paste directly into a stylesheet. It works in all modern browsers without any vendor prefixes. You can apply it as a background-image property on any element, combine it with background-size and background-position for tiling effects, or layer it with other backgrounds using comma-separated values.
How it works
- Choose your first color using the color picker or by entering a HEX or RGB value.
- Add a second color and position it along the gradient axis.
- Adjust the angle or direction of the gradient using the degree slider or preset direction buttons.
- Add more color stops if you want a multi-color gradient effect.
- Copy the generated CSS linear-gradient code and paste it into your stylesheet.
What you'll learn
- CSS linear-gradient accepts a direction and two or more color stops with optional positions.
- Color stop positions as percentages control how quickly transitions between colors happen.
- Stops placed close together create sharp color boundaries while spread stops produce smooth blends.
- Gradients are applied as background-image values, not background-color, in CSS.
- Modern browsers support CSS gradients natively with no vendor prefixes required.
- Multiple gradients can be layered on one element by comma-separating them in background-image.
FAQs
- What is a CSS linear-gradient?
- It is a CSS function that creates a smooth transition between two or more colors in a straight line at a defined angle. It is applied as a background-image value and requires no images or external files.
- How do I control the direction of the gradient?
- Use keywords like to right, to bottom, or to bottom right, or specify an exact angle in degrees such as 90deg for left to right or 45deg for a diagonal direction.
- Can I use more than two colors?
- Yes. You can add as many color stops as you like. Each stop can have a specific position percentage, which controls where along the gradient axis that color appears.
- What is the difference between linear and radial gradients?
- Linear gradients flow in a straight line from one edge to another. Radial gradients radiate outward from a central point in a circular or elliptical pattern. This tool focuses on linear gradients.
- Will the CSS output work in all browsers?
- Yes. All modern browsers including Chrome, Firefox, Safari, and Edge support CSS linear-gradient without any prefix. Only very old browsers like Internet Explorer 9 and below require a different approach.