FREE TOOL
CSS Gradient Generator
Generate linear and radial CSS gradient code online with multi-stop color control, angle adjustment, shape and position settings, real-time preview and one-click copy. An essential tool for frontend developers.
Generate linear and radial CSS gradient code online with multi-stop color control, angle adjustment, shape and position settings, real-time preview and one-click copy. An essential tool for frontend developers.
A CSS gradient is an effect that creates a smooth color transition on an element's background without using images, enabling rich visual depth. CSS supports two gradient types: linear gradients (linear-gradient) transition colors along a straight line, while radial gradients (radial-gradient) radiate colors outward from a center point. Gradients are a CSS Image type and can be used in properties like background, border-image, and list-style-image.
In CSS, linear-gradient(angle, ...) uses the top direction as 0deg, increasing clockwise. 90deg means left to right, 180deg means top to bottom, and 270deg means right to left. 0deg is equivalent to to top. You can also use keywords like to right bottom instead of angle values.
The radial gradient syntax is radial-gradient(shape size at position, ...). The shape can be circle or ellipse (default). Position controls the center point location, such as center, top left, 50% 50%, etc. Size options include closest-side, farthest-corner, and more. Adjusting shape and position can create spotlight, glow, and other visual effects.
background-clip: text with gradients to create gradient textCSS gradients are far superior to image backgrounds: zero file size (no HTTP requests), infinitely scalable without quality loss, support real-time modification, and are compatible with all modern browsers. Only consider images when you need complex textures or noise effects.
0deg goes from bottom to top, 90deg from left to right, 180deg from top to bottom. The angle represents the direction of the gradient line; colors transition along lines perpendicular to that direction. You can also use keywords like to top, to right instead of angle values.
Circle produces a perfectly round gradient that radiates equally from the center point. Ellipse produces an oval gradient that stretches according to the element's width and height. When the element is square, both produce the same effect; for rectangular elements, ellipse fills the entire area.
Set the gradient as the background, then add background-clip: text and -webkit-background-clip: text, and set color to transparent. The gradient will only show within the text boundaries, creating a colorful gradient text effect.
Yes. Use RGBA or HSLA format to define color stop colors, where the fourth parameter controls transparency (0 to 1). You can also use 8-digit hex notation like #FF000080. Mixing transparent color stops into a gradient can create fade-in/fade-out effects.