How it Works

CSS Gradients allow you to display smooth transitions between two or more specified colors. These are natively supported by modern browsers, meaning no images are required, which reduces load times and ensures infinite scalability.

Linear Gradient

Colors transition along a straight line (e.g., top to bottom, or at a 45-degree angle). You can control the angle and direction.

linear-gradient(90deg, red, blue)

Radial Gradient

Colors radiate outwards from a central point. You can control the shape (circle or ellipse) and the position of the center.

radial-gradient(circle, red, blue)

Common Use Cases

1 Page Backgrounds: Use soft gradients instead of flat colors to add depth and a modern feel to your website design.
2 Buttons (CTAs): Subtle vertical gradients on buttons can simulate 3D effects or lighting, making them more clickable.
3 Image Overlays: Overlay a semi-transparent black gradient on images to ensure white text placed on top remains readable.
4 Text Gradients: Use background-clip: text to create stunning gradient text effects (supported in WebKit browsers).

Frequently Asked Questions

How many colors can I add?

There is no theoretical limit! You can add as many Color Stops as you like. The browser will render them in the order and positions you specify.

What is browser support like?

Modern CSS gradient syntax is fully supported by all major browsers (Chrome, Firefox, Safari, Edge). Very old browsers (like IE9) do not support it.

What is a Color Stop position?

It defines where the color begins along the gradient axis. For example, if Red is at 0% and Blue is at 50%, the first half of the area will be a transition from Red to Blue.

Can I use transparency?

Yes! Use RGBA or HSLA formats in the color picker to achieve transparent gradients. This is very useful for overlays or fading effects.

Where can I use the generated CSS?

You can paste it directly into the background or background-image property in your CSS file, or inline within an HTML style attribute.

How to create hard-edge gradients?

Set the position of two adjacent colors to the same value (e.g., Red at 50%, Blue at 50%). This creates a sharp line instead of a smooth transition.

What are Repeating Gradients?

CSS also offers repeating-linear-gradient and repeating-radial-gradient functions, which repeat the pattern infinitely to fill the container. Great for stripes!

Why isn't my gradient showing?

Ensure the element has a defined height/width. If the element is empty and has no height, the background won't be visible. Also check for syntax errors.

More Free Tools

Glassmorphism Gen

Visual generator for CSS Glassmorphism effects (Blur, Transparency, Shadow). Copy CSS instantly.

Favicon Generator

Create website icons (ICO/PNG) instantly. Supports 16x16, 32x32, Apple Touch Icon, and more.

Lorem Ipsum Generator

Generate placeholder text (Lorem Ipsum) for your designs. Paragraphs, words, and lists.

QR Code Generator

Create custom QR codes instantly. Local processing, privacy-safe, with color options.

Color Converter

Convert between HEX, RGB, HSL, and CMYK formats with real-time preview.

Aspect Ratio Calculator

Calculate aspect ratios and dimensions. Useful for designers and video editors.

CSS Gradient Generator