AK
appkiro.comRepeating gradient
Tile the gradient track infinitely.
Tip: switch the type tab above to compare linear, radial, and conic on the same stops.
background: linear-gradient(135deg,
#3B82F6 0%,
#8B5CF6 33%,
#06B6D4 66%,
#F97316 100%
);1. Choose a type
Pick linear, radial, or conic depending on the look you need.
2. Add color stops
Add and adjust color stops, positions, and angle.
3. Preview live
See your gradient update in real-time on the preview canvas.
4. Copy the code
Copy clean CSS or a Tailwind utility class and paste into your project.
CSS gradients let the browser paint smooth color transitions without exporting an image. They scale infinitely, weigh almost nothing, and are easy to theme. This tool gives you a visual editor for the three gradient types in modern CSS.
Linear flows along an angle (great for backgrounds and buttons). Radial spreads out from a point (spotlights, vignettes). Conic sweeps around a center (color wheels, donut charts, loading rings).
Each stop is a color + a position from 0% to 100%. Click the swatch for the color picker or paste a hex value. Drag two stops close together for a hard line; spread them out for a soft blend.
The big canvas shows the gradient at full size. The four sample cards show how it looks on a button, as a card background, as a border ring, and as gradient text — the four most common usages.
Use CSS for vanilla projects — paste the rule into your stylesheet. Use Tailwind for quick prototypes — paste the arbitrary bg-[...] class onto an element. Export JSON to save the full config for later.
border-image-source or wrap it on a parent with a smaller inner element to fake a gradient border.A CSS gradient is a smooth color transition rendered by the browser via the linear-gradient(), radial-gradient(), or conic-gradient() functions. It is used as a background or, with background-clip, as a fill for text and borders.
Linear flows along a line at a chosen angle. Radial flows outward from a point in a circle or ellipse. Conic sweeps around a center point like a clock hand — useful for color wheels, donuts, and skeuomorphic dials.
For linear gradients, 0deg points up, 90deg points right, 180deg points down, 270deg points left. The gradient flows in that direction. Use 135deg for a typical diagonal background.
Repeating gradients tile the gradient track infinitely. Combine with tight stop positions to draw stripes, scanlines, or checkerboard-like patterns without an image.
Tailwind arbitrary-value classes encode every color and stop in the class name. For complex gradients consider registering them as named utilities under theme.extend.backgroundImage in tailwind.config.js.
For text: set background to the gradient, then bg-clip-text + text-transparent. For borders: use a gradient background on a wrapper and border-radius + padding to create a ring effect, or use the new mask-image trick.