🌈

CSS Gradient Generator

Create beautiful linear, radial and conic CSS gradients with live preview.

Color stops

Direction / Angle

CSS code

Preset gradients

What is this tool?

A CSS gradient generator is a free online design tool that lets you create beautiful gradients visually and generates the ready-to-use CSS code. Create linear, radial and conic gradients with multiple colour stops, adjust angles and directions, and copy the CSS with a single click — no coding knowledge required.

How to Use

Choose gradient typeSelect linear (directional), radial (circular from centre) or conic (rotating around a point) gradient.

Add and adjust colour stopsClick to add colour stops along the gradient bar. Click each stop to change its colour using the colour picker.

Set the angle or directionFor linear gradients, drag the angle dial or enter degrees (0° = top to bottom, 90° = left to right).

Copy the CSSClick Copy CSS to grab the complete gradient CSS property, ready to paste into your stylesheet.

Common Uses

🎨

Web Design

Create beautiful gradient backgrounds, buttons, hero sections and UI elements for websites and apps.

📱

App UI

Generate gradients for mobile app backgrounds, cards and buttons in iOS and Android design.

🖨️

Print & Branding

Create gradient colour schemes for brand identities, packaging and marketing materials.

🌅

Social Media

Design gradient backgrounds for social media posts, stories and profile headers.

Frequently Asked Questions

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colours defined in CSS without using an image file. Types: linear-gradient() (directional), radial-gradient() (circular) and conic-gradient() (pie chart style).

What is the CSS syntax for a gradient?

Linear: background: linear-gradient(90deg, #color1, #color2); Radial: background: radial-gradient(circle, #color1, #color2); Add more colour stops as additional comma-separated values.

How do I create a transparent gradient?

Use rgba() or hex with alpha for your colour stops. Example: linear-gradient(to right, rgba(91,78,240,1), rgba(91,78,240,0)) creates a gradient that fades to transparent.

What browsers support CSS gradients?

All modern browsers fully support CSS gradients: Chrome, Firefox, Safari, Edge and Opera. Internet Explorer 10+ has basic support. No prefix is required for modern browsers.