The Fundamentals of CSS Gradients
CSS gradients are transitions between colors rendered by the browser. Unlike static background images, these gradients are generated dynamically, which reduces page load times and allows for scaling without pixelation. The Gradient Generator supports three distinct gradient types: linear, radial, and conic.
Each gradient type distributes color across a surface using a different mathematical path. By selecting the appropriate type, adjusting its direction or shape, and positioning color stops, you can build custom visual backdrops for web interfaces.
Understanding Linear Gradients: Direction and Color Stops
A linear gradient blends colors along a straight line. The direction of this line is determined by a numerical angle value.
- 0° points directly upward.
- 90° points directly to the right.
As the angle increases, the gradient line rotates clockwise. The colors transition sequentially from the starting point to the ending point along this vector.
The tool initializes with a default linear gradient containing two color stops: #6366f1 positioned at 0% and #ec4899 positioned at 100%. This creates a smooth transition from a blue-purple hue at the start of the line to a pink hue at the end.
Exploring Radial Gradients: Shapes and Color Distribution
A radial gradient spreads colors outward from a central point. Unlike linear gradients, radial gradients do not use an angle to determine direction. Instead, the color distribution is governed by the chosen geometric shape.
The tool provides two shape options for radial gradients:
- Ellipse: The gradient stretches to fill the container, expanding at different rates horizontally and vertically.
- Circle: The gradient spreads uniformly in all directions, maintaining a constant radius regardless of the container's aspect ratio.
Colors transition progressively from the innermost center point (representing the start of the gradient) to the outermost edge (representing the end).
Conic Gradients: Sweeping Colors Around a Central Point
A conic gradient sweeps colors around a central point, mimicking the appearance of a color wheel or a pie chart.
Rather than radiating outward from the center or transitioning along a straight line, the color transitions occur in a circular rotation around the midpoint. The starting angle of this sweep is controlled by the angle slider, where 0° starts the color transition pointing straight up and 90° rotates the starting point to the right.
The Role of Color Stops in Gradient Design
Color stops define the specific colors and their exact placements along the gradient path. Each color stop consists of two parameters:
- Stop color: The specific color value.
- Position: A percentage value from
0%(the start of the gradient) to100%(the end of the gradient).
By adjusting these positions, you control how tightly or widely the colors blend into one another. Placing stops close together creates a sharp transition, while spacing them far apart results in a gradual blend.
The Gradient Generator allows you to use up to eight color stops. When you add a new color stop, it defaults to a position of 50%. Once you reach the maximum limit of eight color stops, the "Add stop" button is disabled.
How to Use the Gradient Generator Tool Effectively
The interface provides a direct way to build, preview, and export CSS gradients.
1. Select the Gradient Type
Under the Gradient type heading, choose one of the three options:
- Linear
- Radial
- Conic
2. Configure Direction or Shape
- For Linear or Conic gradients, adjust the Angle slider to set the direction of the transition.
- For Radial gradients, select either Ellipse or Circle under the Shape heading.
3. Manage Color Stops
Under the Color stops heading, you can customize up to eight stops:
- To change a color, select a new value under Stop color.
- To shift its location along the gradient, adjust the Position slider.
- To add a new color transition point, click Add stop (available when there are fewer than eight stops).
- To delete an unwanted color point, click Remove stop.
4. Copy the CSS Code
The tool displays a live visual preview of your gradient as you make adjustments. Once you are satisfied with the design, go to the CSS section and click Copy CSS. The button text will change to Copied to confirm the code has been copied to your clipboard.
Privacy and Processing
Every gradient is rendered right in your browser. Nothing you set here is uploaded to BroBroGo. All color calculations, preview rendering, and CSS code generation happen locally on your device.
Frequently Asked Questions
What is the difference between linear, radial and conic gradients?
A linear gradient blends colors along a straight line you aim with an angle. A radial gradient spreads them outward from the center in a circle or ellipse. A conic gradient sweeps them around the center like a color wheel.
What are color stops?
Each color stop is a color pinned to a position along the gradient — 0% at the start, 100% at the end. Move a stop to shift where its color peaks, or add more stops for a richer blend. You can use up to eight.
How do I control the direction?
For a linear or conic gradient, the angle slider sets the direction — 0° points up, 90° points right. A radial gradient has no angle; pick a circle or ellipse shape instead to change how it spreads.