CSS Gradient Generator
Generate beautiful CSS gradients visually. Runs on your device — nothing is uploaded, nothing is stored.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Click a preset to load it instantly
Build a CSS gradient visually and copy the code. Choose Linear, Radial or Conic, set the colors and where each one sits, and a live preview shows the result. The output box gives you a ready-to-paste declaration such as background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); with a copy button.
Linear gradients take an angle from 0 to 360 degrees, with eight arrow buttons for the common directions. Radial gradients let you pick a circle or ellipse and a position (center, the sides or the corners), and conic gradients take a start angle and a position. Each color stop has its own color picker, a position slider from 0 to 100% and an opacity slider; when opacity is below 100% the code switches that color to rgba(). You can add more stops or delete them, down to a minimum of two. Twelve named presets, such as Ocean Breeze, Aurora, Lava and Rainbow, load a starting point.
Why this runs on your device
There is nothing sensitive in a gradient, and the privacy stake here is small. The preview, the CSS and the PNG export are all produced in your browser, so it responds instantly and works without an account or a request to a server.
- Choose Linear, Radial or Conic, or load one of the presets.
- Set the angle or position, then edit each color stop's color, position and opacity.
- Add or remove stops until the preview looks right.
- Copy the CSS, or export a 1200×600 PNG.
- The CSS output is a single background declaration in the standard syntax. It does not add vendor prefixes, a fallback solid color or the repeating-gradient functions.
- The PNG export is always a 1200×600 image, and it is a simplified drawing. A radial export is always a centered circle and ignores the shape and position you chose, and a conic export is always centered, so those exports can differ from the preview. Copy the CSS if you need the exact result.
- Loading a preset replaces the type, the angle and the stops, but a radial or conic preset keeps the shape, position and start angle you had set before.
- Color stops are set with a color picker in hex. You cannot type a color name, an hsl() value or a CSS variable into a stop.