Handytool
Developerუფასოახორციელდება ადგილობრივად

CSS gradient generator

Build linear, radial, and conic CSS gradients — drag stops, pick colors, copy the CSS.

Preview
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
Type
Presets

Add up to six color stops, drag the position slider, and copy the CSS.

CSS gradient generator შესახებ

Handytool's CSS gradient generator builds linear, radial, and conic gradients with up to six color stops. Drag a stop's position, change its color, switch the gradient type, and the live preview and CSS declaration update instantly. Start from one of the built-in presets — Lime Swiss, Sunset, Sky, Aurora — or design your own from scratch.

CSS gradient generator მახასიათებელი

  • 01

    Linear, radial, and conic

    Linear is the everyday background gradient; radial is great for highlights and vignettes; conic is perfect for pie charts, color wheels, and rotating backgrounds.

  • 02

    Up to six color stops

    Add and remove stops, set each one's position with a slider, and pick its color via the system color picker or a hex value. Stops re-sort by position automatically.

  • 03

    Copyable CSS declaration

    The output is a complete background: ... declaration that you can paste straight into a stylesheet, a styled component, or a Tailwind arbitrary-value class.

CSS gradient generator ხშირი კითხვები

What's the difference between linear, radial, and conic?
Linear gradients run in a straight line at a given angle; radial gradients spread outwards from a center; conic gradients sweep around a point like a clock hand. Each one suits a different visual effect.
How many color stops should I use?
Two stops is the classic two-color gradient. Three or four lets you create realistic transitions (sunset, aurora). More than six tends to look noisy — that's why this generator caps at six.
Can I use this for backgrounds in an email template?
Most email clients still don't support modern CSS gradients reliably — provide a solid fallback color in addition to the background gradient if you copy this into an email template.
Is the output pixel-accurate?
Yes — the preview is rendered by the browser's native gradient engine, so what you see is what your CSS will produce.

დაკავშირებული ინსტრუმენტები

Developer →

სხვა ინსტრუმენტების გამოკვლევა

ყველა ინსტრუმენტი →