siutil. CSS Gradient Generator
processed in your browser · never uploaded

Gradient type

Angle

90°

Color stops

Preview

CSS

 
Everything runs in your browser — your colors and settings are never uploaded.
 
 
   
  
Build CSS gradients for website backgrounds, buttons and headings just by choosing colors and dragging a few sliders. This generator supports all three gradient types — linear (`linear-gradient`), radial (`radial-gradient`) and conic (`conic-gradient`) — and lets you go beyond two colors with three or more color stops. Each stop has its own color and position (%), and for linear and conic gradients you can set the angle (0–360°) with a slider. A live preview updates as you edit so you can dial in exactly the look you want. The output is ready to paste straight into your CSS — for example `background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);` — and copies with one click. Switch on text-gradient mode to also generate the full snippet for gradient-colored text using `background-clip: text` (including the `-webkit-` prefix and `color: transparent`), so gradient headings and logos are a copy-paste away. You pick colors with a native color picker, and everything runs in your browser: the colors and settings you enter are never uploaded, stored, or sent to a server. If you are still deciding on the colors themselves, choose them with our color tools first and paste them here to finish the code in one go.
How to use
  1. Choose the gradient type (linear / radial / conic) and, if needed, set the direction with the angle slider.
  2. Set each color stop's color and position (%). Use "Add color" to make a gradient with three or more colors.
  3. The generated CSS appears instantly on the right. Click "Copy" to paste it into your CSS. Turn on "Text gradient" for gradient-colored text.
FAQ
Are my colors and settings uploaded anywhere?
No. Code generation and the preview run entirely in your browser. The colors, angle and other settings you choose are never uploaded, stored, or sent to a server — the tool is fully local.
Can I make a gradient with three or more colors?
Yes. Use the "Add color" button to add color stops. Each stop has its own color and position (%), so you can build gradients with three, four or more colors. Remove any stop with the delete button on its row.
Can it generate text (font) gradients too?
Yes. Turn on "Text gradient" and it outputs the full snippet for gradient-colored text using `background-clip: text` (with the `-webkit-background-clip: text` prefix for compatibility) and `color: transparent`. You can copy-paste it to apply a gradient to headings or logo text.
What's the difference between linear, radial and conic gradients?
Linear gradients blend colors in a straight line along the angle you set. Radial gradients blend outward from a center point. Conic gradients sweep the colors around a center, which is handy for pie-chart or color-wheel looks. Switching the type updates the preview and CSS instantly so you can compare them.
Can I use the generated CSS as-is?
Yes. The output is formatted as a CSS property, such as `background: linear-gradient(...);`, ready to paste into the rule for your element. Use the "Copy" button and paste it into your CSS. For text gradients, paste the full multi-line output together.