What's the difference between linear and radial?

Linear gradients transition in a straight line at a specified angle. Radial gradients transition outward from a center point in a circular or elliptical pattern.

Can I use more than 2 colors?

This tool supports 2-color gradients. For multi-stop gradients, use the generated CSS as a starting point and add color stops manually.

Do CSS gradients work in all browsers?

Yes. CSS gradients have excellent browser support across all modern browsers including Chrome, Firefox, Safari, and Edge.

Design Tool

CSS Gradient Generator

Name: AdaptlyPost
Author: AdaptlyPost

Create beautiful CSS gradients visually. Pick colors, adjust angle, choose linear or radial, and copy the generated CSS. Includes preset gradients for quick inspiration.

100% free — no account needed

Type

Color 1

Color 2

Angle: 135°

Preview

Generated CSS

background: linear-gradient(135deg, #6366f1, #ec4899);

Presets

Stunning Gradients in Seconds

Visual gradient builder with live preview

Linear & Radial

Toggle between linear and radial gradient types with adjustable angle.

6 Preset Gradients

Start with beautiful presets like Sunset, Ocean, Forest, Lavender, Cherry, and Midnight.

Randomize

Generate random gradient combinations for inspiration.

Copy CSS

One-click copy of the generated CSS background property.

FAQ

Design Tools

Create Branded Visuals

Use custom gradients in your social media graphics with AdaptlyPost.