CSS gradients create smooth color transitions that enhance visual design without images. Linear gradients transition along a straight line, while radial gradients radiate from a center point. This visual tool lets you design gradients by adding color stops, adjusting positions, and changing directions, then copy the generated CSS code for your project.
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
Choose a gradient type (linear or radial), set the direction or angle, and add color stops by clicking on the gradient bar. Each color stop has a color picker and position slider. Drag stops to reposition them or remove them with a click. The live preview shows the gradient in real time, and the generated CSS code is displayed below, ready to copy. Preset gradients are available for quick starting points.
CSS gradients are used for creating modern backgrounds and hero sections, button hover effects, progress bar fills, text gradient effects with background-clip, overlay effects on images, decorative dividers and borders, card backgrounds with subtle transitions, loading skeleton animations, and pricing table highlights. Gradients eliminate the need for background images, reducing HTTP requests and improving performance.
CSS linear-gradient() accepts a direction (angle or keyword like 'to right') and two or more color stops with optional positions. The browser interpolates colors between stops. Radial-gradient() uses shape (circle or ellipse), size (closest-side, farthest-corner, etc.), and position keywords. Color stops can use any CSS color format (hex, rgb, hsl, named colors). The tool generates vendor-prefix-free CSS as all modern browsers support unprefixed gradients.
A CSS gradient is a smooth transition between two or more colors, rendered by the browser without images. CSS supports linear-gradient (straight line), radial-gradient (circular), and conic-gradient (around a center point).
Use the background property with a gradient function: background: linear-gradient(to right, #ff0000, #0000ff); creates a left-to-right gradient from red to blue.
Yes. CSS gradients support unlimited color stops. Each stop can have a specific position: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%).
Linear gradients transition colors along a straight line (you specify the direction/angle). Radial gradients transition from a center point outward in a circular or elliptical shape.
Transform, format, generate, and encode data instantly. Private, fast, and always free.
Browse All Tools