Skip to main content
Back to Colors generators

Colors

CSS Gradient Generator

Used by developers, writers, and creators worldwide.

A CSS gradient generator gives you ready-to-paste linear-gradient() code without touching a color picker. Set the number of color stops — two for a clean, minimal blend or three for a richer mid-point shift — then choose a direction: horizontal, vertical, or one of the diagonal angles like 45deg or 135deg. The output is standard CSS you can drop straight into a stylesheet, a styled-component, or a Tailwind arbitrary-value class. It's useful whenever you need a quick background and don't want to spend ten minutes auditing hex values. Generate a few variations, copy the one that works, and adjust the colors later if needed.

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 input to 2 for a simple blend or 3-4 for a more complex gradient.
  2. Choose a Direction from the dropdown (e.g., 'to right', '135deg') to control the angle of the color flow.
  3. Click Generate to produce a random linear-gradient() with those settings.
  4. Copy the output CSS code directly from the output field.
  5. Paste it into your stylesheet's background property and optionally swap the hex values for your brand colors.

Use Cases

  • •Generating a diagonal 135deg hero background in a Next.js app without sourcing stock photos
  • •Styling CTA buttons with a two-stop left-to-right gradient that adds depth without an image
  • •Prototyping card section backgrounds in Figma by copying the output into a fill field
  • •Creating a three-stop gradient overlay on a full-bleed banner image to keep headline text legible
  • •Seeding a Storybook component library with varied background values to stress-test text contrast

Tips

  • →Generate 5-10 gradients in a row and screenshot the ones you like — random outputs are not reproducible, so save before navigating away.
  • →Three-stop gradients with a neutral mid-color (light gray or white) between two saturated hues look polished and avoid the 'muddy middle' problem.
  • →For overlay use on photos, regenerate until you get a dark-to-transparent gradient, then manually set the second stop to rgba(0,0,0,0) in your stylesheet.
  • →Diagonal directions (45deg or 135deg) make wide rectangular containers look more dynamic than horizontal or vertical flows.
  • →After generating, check contrast between any text you place on top using a contrast checker — vibrant gradients often fail WCAG AA in the mid-blend zone.
  • →To create a gradient border, apply the gradient to a wrapper div's background and use padding to reveal it behind a solid-color inner element — no extra images needed.

FAQ

how do I paste a CSS gradient into Tailwind without a custom class

Tailwind supports arbitrary values, so you can write className='[background:linear-gradient(to_right,#e96c5a,#4b90d9)]' — replace spaces with underscores inside the brackets. If you reuse the gradient across components, add it to tailwind.config.js under theme.extend.backgroundImage as a named key instead.

what's the difference between 2 and 3 color stops in a gradient

Two stops produce a clean, predictable blend — good for buttons, overlays, and cards. Three stops let you add a mid-point color shift, which reads as more editorial and suits hero sections or full-bleed banners. Start with two and only add a third if the result feels too flat.

do CSS linear gradients need vendor prefixes in 2024

No. All major browsers — Chrome, Firefox, Safari, Edge — have supported unprefixed linear-gradient() since 2013. The code this generator outputs works as-is with no modifications needed for any browser your users are realistically running.