Skip to main content
dubinity

Design & Accessibility

CSS Gradient Generator

Build linear, radial and conic CSS gradients with a live preview and copyable CSS.

  • Runs in your browser
  • Works on mobile
  • Out: CSS
Loading the tool…

Your files and text are processed on your own device, inside this page. Nothing is uploaded to Dubinity or stored, and closing the tab discards it. How privacy works

About CSS Gradient Generator

Drag the colour stops, turn the angle and switch between linear, radial and conic until the gradient looks right, then copy the CSS.

The preview is not a picture of a gradient - it is your own browser drawing the exact declaration you copy, so nothing can look different once it is in your stylesheet. The rule includes a solid background-color as a fallback for very old browsers.

How to use it

  1. 1Pick linear, radial or conic.
  2. 2Set the angle or centre point.
  3. 3Add colour stops and drag them into place.
  4. 4Copy the background-image declaration, or the full rule with its fallback.

Questions

Was this tool helpful?

Related tools

All design tools

  • Color Converter

    Convert a colour between HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH, with contrast against black and white.

    TEXT
    Runs in your browserOpen tool

  • CSS Box Shadow Generator

    Stack box-shadow layers with offsets, blur, spread and opacity, and copy the CSS.

    Runs in your browserOpen tool

  • CSS Border Radius Generator

    Shape each corner, including elliptical corners, and copy the shortest border-radius CSS.

    Runs in your browserOpen tool

  • Lorem Ipsum Generator

    Generate placeholder paragraphs, sentences or words, in classic Latin or in Arabic filler text.

    NONE
    Runs in your browserOpen tool

  • Color Palette Generator

    Generate colour palettes from a base colour and a harmony, or at random with locks, then export CSS, tokens, Tailwind or a PNG.

    HEX · RGB · HSL
    Runs in your browserOpen tool

  • Color Contrast Checker

    Check the WCAG 2.2 contrast ratio of a text and background colour, with AA and AAA verdicts and the nearest passing colour.

    HEX · RGB · HSL
    Runs in your browserOpen tool