How do I create a gradient that works in all browsers?

Modern browsers (Chrome 26+, Firefox 16+, Safari 6.1+, Edge all versions) support unprefixed CSS gradients. You no longer need -webkit- or -moz- prefixes for production use. The standard syntax is: linear-gradient(direction, colour1, colour2). If you must support very old browsers, add a solid background-color fallback before the gradient declaration.

How do I add transparency to a gradient?

Use rgba() or hsla() colour values for transparent colour stops: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.8)) creates a gradient from transparent to semi-transparent black — useful for overlays on images. Using 'transparent' as a keyword can cause unexpected colour shifts in some browsers; prefer rgba(r,g,b,0) using the same colour as the adjacent stop.

Can I use gradients on text?

Yes: apply the gradient as a background-image, set background-clip: text, and set color: transparent. This clips the gradient to the text shape. Example: background-image: linear-gradient(to right, #f00, #00f); background-clip: text; -webkit-background-clip: text; color: transparent; The -webkit- prefix is still needed for Safari.

How to Create CSS Gradients Online

Design beautiful linear, radial, and conic CSS gradients with a visual editor and copy the ready-to-use CSS code instantly.

Steps

Choose gradient type

Select Linear (colour transitions in a straight line at an angle), Radial (colours radiate from a center point), or Conic (colours rotate around a center point). Linear gradients are most common for backgrounds; radial creates spotlight and glow effects; conic is used for pie charts and clock-face animations.

Set colour stops

Add colour stops by clicking on the gradient bar. Each stop defines a colour at a position (0% to 100%). Drag stops to reposition them, click to change the colour, and press delete to remove them. Add at least two stops for a basic gradient and more for complex multi-colour effects.

Adjust direction or angle

For linear gradients, set the angle in degrees: 0° is top to bottom, 90° is left to right, 135° is diagonal top-left to bottom-right. Use the direction picker or type a precise angle value. For radial gradients, set the shape (circle or ellipse) and position of the centre point.

Preview and refine

The large preview area shows exactly how the gradient will look as a background. Adjust colours and positions until the gradient achieves your design goal.

Copy the CSS code

Click Copy CSS to get the complete, browser-compatible CSS: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); The code is ready to paste into your stylesheet.

CSS Gradient Types and Their Use Cases

Linear gradients create smooth colour transitions along a straight line. They are the most used gradient type for section backgrounds, button states, header backgrounds, and decorative dividers. Radial gradients emanate from a central point — useful for spotlight effects, glow effects behind focal elements, and circular progress indicators. Conic gradients rotate colours around a point — relatively new to CSS, used for pie charts, spinner animations, and creative circular designs. Repeating variants (repeating-linear-gradient, repeating-radial-gradient) create striped patterns by repeating the gradient cycle. Multiple gradients can be layered using comma-separated values, enabling complex multi-layer backgrounds without images.

Using Gradients as Image Overlays

One of the most practical gradient use cases is semi-transparent overlay on background images, which improves text legibility. Apply both as a comma-separated background value: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero.jpg'). The gradient renders on top of the image, darkening it enough for white text to be legible. Directional gradients (dark at the bottom, transparent at the top) are particularly effective for card components with text overlaid on images. This technique avoids the need for separate overlay elements in the HTML and keeps the CSS self-contained.