CSS Gradient Generator
Create linear-gradient, radial-gradient and conic-gradient CSS. Add color stops, set angle, preview live.
CSS generated is free to use — no attribution required.
What are the CSS gradient types?
linear-gradient — colors transition along a straight line. Specify angle in degrees (0° = bottom to top, 90° = left to right, 180° = top to bottom). radial-gradient — colors radiate outward from a center point. conic-gradient — colors rotate around a center point (useful for pie charts and color wheels).
What is the CSS gradient syntax?
background: linear-gradient(90deg, #6366f1 0%, #22d3ee 100%). Add more color stops by inserting additional color-position pairs: linear-gradient(90deg, #6366f1 0%, #f472b6 50%, #22d3ee 100%).
How do hard color stops work?
Create sharp transitions by setting two stops at the same position: linear-gradient(90deg, red 50%, blue 50%). This technique is used for striped backgrounds.
How do you use a CSS gradient as a text fill?
Use background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent for gradient text effects.