CalcaTools

CSS Gradient Generator

A free tool to create beautiful CSS gradients visually. Pick colors, adjust direction, and copy the CSS code instantly. Supports linear and radial gradients.

Last updated: June 2026 · Free · No sign-up required

CSS Code




			
			
			
											

					
Quick reference

					
Gradient typeCSS syntax
Linearlinear-gradient(135deg, #667eea, #764ba2)
Radialradial-gradient(circle, #667eea, #764ba2)
Conicconic-gradient(from 0deg, …)
				

				
				
								

					
Interpretation guide

					
AngleDirection
0degBottom → top
90degLeft → right
135degTop-left → bottom-right (most popular)
180degTop → bottom
				

				
				
								

					
Formula & methodology

					

												

							Formula:							background: linear-gradient(angle, color1 stop1%, color2 stop2%, …)
						

																			
  1. Pick the type (linear/radial), your colours and the angle.
  2. The live preview updates as you drag stops.
  3. Copy the generated CSS — one background property, no images needed.
Worked example: linear-gradient(135deg, #667eea 0%, #764ba2 100%) — the classic purple hero-section gradient — renders identically across all modern browsers from this single line.
																	

				

				
								

					
Frequently asked questions

										

						
How do I add a CSS gradient to an element?

						
Set it as the background: `background: linear-gradient(135deg, #667eea, #764ba2);`. Gradients are images in CSS terms, so they also work in background-image and multiple-background stacks.

					

										

						
Linear vs radial — when to use which?

						
Linear suits headers, buttons and section backgrounds (directional flow); radial creates spotlight and orb effects from a centre point. Conic handles pie-chart-style sweeps.

					

										

						
Can I use more than two colours?

						
Yes — add as many stops as you like with positions: `linear-gradient(90deg, red 0%, yellow 50%, green 100%)`. Smooth multi-stop gradients usually keep neighbouring hues related.

					

										

						
Why does my gradient show banding?

						
Large areas with close colours can show stripes (8-bit colour limits). Fixes: pick slightly more distant colours, shorten the gradient area, or overlay subtle noise texture.

					

										

						
Do CSS gradients hurt performance?

						
No — they render on the GPU and replace what would otherwise be image downloads. A gradient background is one of the cheapest visual effects in CSS.