Visually create CSS gradients and copy the code
background: linear-gradient(135deg, #137fec 0%, #0d5bbd 100%);Select gradient type (Linear/Radial)
Pick colors and adjust positions
Set the angle or direction
Copy the CSS code and apply to your project
A CSS gradient is a smooth transition between two or more colors as a background. There are two main types: linear-gradient and radial-gradient.
Color stops define where specific colors are positioned in a gradient. 0% is the start, 100% is the end, and you can add multiple stops in between.
Gradients can be used for website backgrounds, buttons, cards, headers, text effects, and more. Simply apply the CSS code to the background property.
CSS gradients are broadly divided into two types: linear-gradient and radial-gradient. Linear gradients flow in one direction, and you can specify an angle from 0deg to 360deg to create flows in various directions. Radial gradients spread color outward from a center point, and you can choose between circle and ellipse shapes. Each type is applied directly to the background property, so you can express rich color without any images.
A color stop specifies in percentage (%) where a particular color starts or ends within the gradient. Using only two colors creates a simple transition, but adding three or more stops allows you to create complex color transitions like a rainbow or sunset. Placing stops close together creates sharp color boundaries, while spacing them farther apart creates a more natural blend.
Gradients are widely used in UI elements such as buttons, cards, section backgrounds, and text masks. They add depth and vibrancy compared to solid color backgrounds, and gradient buttons using two brand colors are effective for calls to action (CTA). You can also layer multiple gradients by listing them with commas in the background-image property to create even more complex visual effects.