Online CSS Gradient Generator - Linear and Radial

Back

Create custom CSS gradients visually. Generate code for linear or radial backgrounds and apply them directly to your web projects.

Type

Direction (90°)

Colors

100%

Preview

background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);

Usage Examples

Example Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

How CSS Gradients Work

CSS gradients allow you to display smooth transitions between two or more specified colors. There are two main types: Linear (defined by an axis or angle) and Radial (defined by its center). You can adjust the angle or shape, and add multiple color stops to create complex effects.

Create custom CSS gradients visually. Generate code for linear or radial backgrounds and apply them directly to your web projects.