Conic, Radial & Linear Gradient Generator — Multi-Color CSS, Free
Color stops
At least 2 stops are required.
CSS output
background: linear-gradient(90deg, #7C3AED 0%, #3B82F6 100%);Related external tools
Some links are affiliate links.
Related tools
This free CSS gradient generator lets you create linear, radial and conic gradients with as many color stops as you need. Add stops, drag their positions, pick colors with the color picker or type a HEX code, and watch a large live preview update instantly. Adjust the angle (for linear), shape and center (for radial), or start angle and center (for conic). When you're done, copy the ready-to-use background CSS or a Tailwind arbitrary value with one click. No install, no sign-up — all calculations happen in your browser, and your color data is never sent anywhere.
How to use
- Choose a gradient type: Linear, Radial, or Conic.
- Edit the color stops: click the color picker or type a HEX code for each stop, and drag the position slider (0–100%).
- Add more stops with the + button (up to 10). Remove a stop with ×. At least 2 stops are always kept.
- Adjust type-specific settings: angle (linear), shape/size/center (radial), or start angle/center (conic).
- Start from a preset or click Random to explore. Fine-tune any parameter you like.
- Copy the generated background CSS (or a Tailwind value) with one click and paste it into your project.
Gradient types
CSS has three gradient functions, each creating a different visual effect. This tool supports all three so you can pick the one that fits your design.
Linear gradient (linear-gradient)
Colors flow in a straight line in a given direction. The angle (0–360°) controls the direction: 90° goes left to right, 180° top to bottom. This is the most common gradient type, used for hero backgrounds, button fills and decorative dividers.
Radial gradient (radial-gradient)
Colors radiate outward from a center point. You can choose between a circle or ellipse shape, set the size keyword (closest-side, farthest-corner, etc.) and move the center position. Great for spotlight effects, glows and soft backgrounds.
Conic gradient (conic-gradient)
Colors rotate around a center point like a spinning wheel. You can set the start angle and center position. Conic gradients are perfect for color wheels, pie charts and creative spinning effects. Note: conic-gradient is a relatively new CSS feature — very old browsers may not support it.
Features
Multiple color stops — add, remove and position them
Add up to 10 color stops with the + button and remove them with ×. At least 2 stops are always kept. Drag each stop's position slider (0–100%) to place it exactly where you want. Put two stops at the same position to create a hard boundary (a sharp color break instead of a smooth blend).
Angle, shape and center position
Linear gradients have an angle slider (0–360°). Radial gradients let you pick between circle and ellipse, choose a size keyword and move the center with X/Y sliders. Conic gradients add a start angle (from Ndeg) and a center position.
Color picker and HEX input with alpha
Each stop has a native color picker and a HEX text input. Lower the opacity (alpha) slider to create a semi-transparent stop — the output switches to rgba() automatically (or you can force HEX8 mode). Invalid color codes show an inline error without breaking the rest of the gradient.
Large live preview
The gradient is rendered as a large rectangle at the top, updating instantly as you edit any setting. What you see is what the CSS produces — no lag, no re-render delay.
Copy CSS instantly (background, background-image or Tailwind)
Choose the output format and click Copy: background: linear-gradient(...); for direct CSS use, background-image: value-only for layered backgrounds, or bg-[...] Tailwind arbitrary value for Tailwind CSS projects. Colors, angles and percentages are always CSS-compatible — no locale formatting, no comma-as-decimal.
Presets and random generation
Click any preset swatch to instantly apply a curated gradient as your starting point. Hit Random to get a completely fresh gradient. Both work as a creative starting point you can then fine-tune.
Use cases
Hero backgrounds, buttons and card gradients
Set a two- or three-color linear gradient for a hero section or CTA button, copy the background CSS and paste it directly into your stylesheet. A radial gradient works well for a soft glow behind a card.
Paste straight into CSS or Tailwind
Choose background: output and paste the full line into your CSS rule. For Tailwind, switch to the Tailwind tab and copy the bg-[linear-gradient(...)] class — it works as a utility class anywhere in your markup.
Conic gradient for color wheels and pie-chart effects
Add multiple color stops at even intervals in a conic gradient to create a color wheel or a pie-chart-style background. For example, place six colors at 0%, 17%, 33%, 50%, 67% and 83% to divide the circle into equal segments.
Notes and tips
- Angle direction: 0° points upward, 90° goes left to right, 180° top to bottom — this follows the CSS specification, which can feel counterintuitive. Use the live preview to confirm the direction.
- Browser support: linear-gradient and radial-gradient are supported in all modern browsers. conic-gradient is a newer feature and may not render in very old browsers — always check on your target environment.
- Position without a percentage: if a stop has no explicit position (pos = auto), the browser distributes it evenly between the surrounding stops. This gives a balanced spread but less control.
- Semi-transparent gradients: lower a stop's alpha to less than 100% to get rgba() output. You can layer this over a background color or image for an overlay effect.
- Your color data is never sent to a server — all gradient calculations happen locally in your browser.
Frequently asked questions
- Can I create radial and conic gradients, not just linear?
- Yes. Switch between Linear, Radial and Conic using the type selector at the top. Each type shows its own settings: angle for linear, shape/size/center for radial, and start angle/center for conic.
- Can I add more than two color stops?
- Yes. Click the + button to add a stop (up to 10). Each stop has its own color picker, HEX input and position slider. Remove any stop with the × button — at least 2 stops are always kept.
- Can I change the angle and center position?
- Yes. The angle slider controls the direction of a linear gradient (0–360°). For radial and conic gradients, X/Y sliders set the center position. Radial also has shape and size options.
- Can I copy the CSS and use it directly?
- Yes. The output shows a complete background: linear-gradient(...); line (or background-image: or a Tailwind class). Click Copy and paste it into your CSS. Values are always CSS-compatible — no locale formatting.
- Can I use the gradient in Tailwind CSS?
- Yes. Switch to the Tailwind tab to get a bg-[...] arbitrary value class. Copy it and add it to your HTML element's class list — Tailwind's JIT compiler will pick it up.
- Can I make a semi-transparent gradient with rgba?
- Yes. Lower the opacity (alpha) slider for any color stop to less than 100%. The output automatically switches that stop to rgba(), giving you a semi-transparent color in the gradient.
- Is my color data sent to a server?
- No. All gradient generation, color parsing and CSS building happen entirely in your browser. Your color choices and the resulting CSS are never uploaded or stored.