Skip to main content
Back to Colors generators

Colors

CSS Gradient Generator

Used by developers, writers, and creators worldwide.

The CSS gradient generator creates instant linear-gradient code you can paste directly into any stylesheet. Set the number of color stops (up to 6) and pick a direction — to right, 135deg, or leave it random — and the tool outputs clean, browser-ready CSS in one click. No vendor prefixes, no color theory required. Each result uses algorithmically balanced hues so stops flow naturally rather than clashing. Designers and developers reach for this when building hero sections, card headers, or button backgrounds and need a starting point fast. It's also useful mid-prototype, when you want a visually distinct gradient without opening Figma or spending ten minutes picking hex codes by hand.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Set the Color Stops number to control how many hues appear in the gradient (2 for simple, 4–5 for rich).
  2. Choose a Direction from the dropdown, or leave it on Random to let the generator pick an angle for you.
  3. Click Generate to produce a new gradient and see it previewed alongside the CSS output.
  4. Copy the generated background property from the output field using the copy button.
  5. Paste the code directly into your CSS rule, Tailwind arbitrary value, or inline style attribute.

Use Cases

  • •Dropping a ready-made background property into a Tailwind arbitrary-value class for a landing page hero
  • •Generating a 5-stop diagonal gradient at 135deg to use as a CSS custom property across a dark-mode UI
  • •Quickly mocking up distinct card header colors in a Storybook component before a design review
  • •Pasting the output into a Figma frame's fill field to audition gradient directions without leaving the browser
  • •Creating visually separate section backgrounds on a Webflow or Framer page without touching a color picker

Tips

  • →Three stops with a warm midpoint hue (amber or peach) between two contrasting anchor colors produces universally appealing results.
  • →If you want a gradient that matches a brand palette, generate several results with 2 stops until you find hues close to your brand colors, then manually swap the hex values.
  • →Diagonal gradients at 120–150deg feel more dynamic than 90deg left-to-right fades — use the Direction dropdown to lock this angle if you find a result you like.
  • →Paste the gradient into a CSS custom property like --hero-bg and reference it everywhere; swapping themes later becomes a single-line change.
  • →For dark-mode UIs, re-run the generator with 4–5 stops until you get a result with predominantly dark base colors, then use it as a subtle panel background rather than a full-screen gradient.
  • →Combine the gradient output with a semi-transparent image overlay using background: linear-gradient(...), url(image.jpg) to add texture without losing the color effect.

FAQ

how do I use the generated gradient code in my CSS or React project

Copy the output and paste it as the value of a background property in any CSS rule or React style object — for example, .hero { background: linear-gradient(135deg, #e96c6c, #6c8ee9); }. In Tailwind, wrap it as an arbitrary value: class='[background:linear-gradient(...)]'. No modification needed; it works in all evergreen browsers without vendor prefixes.

how many color stops should I use for a UI gradient

Three to four stops is the sweet spot for most UI backgrounds — enough to create depth without the hues muddying each other. If the result looks banded, try adding one extra stop or generating a fresh result with a slightly different direction. The generator supports 2 to 6 stops via the Color Stops input.

what's the difference between the direction options like 135deg and to bottom right

Keyword directions like to bottom right are viewport-relative and always point toward that corner regardless of element shape. Degree values like 135deg are fixed angles, so 135deg flows top-left to bottom-right and looks the same even in non-square elements. For card and hero designs, 135deg tends to feel more intentional; to bottom right is a safe default for full-width banners.