🌈 CSS Gradient Generator

CSS Gradient Generator — Create CSS Gradient Backgrounds Online

CSS gradients replaced thousands of gradient image files when they became widely supported. A background that once required a 1px-wide PNG image (with all its HTTP request overhead) became a single line of CSS. Today, gradients are one of the most versatile tools in a front-end developer's kit — used for backgrounds, overlays, hero sections, text fills, borders, buttons, and progress bars.

This free online CSS gradient generator lets you build linear and radial gradient backgrounds visually, see a live preview as you adjust settings, and copy the finished CSS code in one click.

How to create a CSS gradient background

1. Choose gradient type — select Linear for directional gradients (top-to-bottom, diagonal, horizontal) or Radial for gradients that radiate outward from a centre point.
2. Set your colors — use the color pickers to choose your start and end colors. Or click any preset in the gallery above to load a ready-made combination instantly.
3. Adjust angle or direction — for linear gradients, type an angle from 0 to 360 degrees. 135° is a popular diagonal. 90° is left-to-right. 180° is top-to-bottom.
4. Watch the live preview — the preview box updates in real time as you change any setting, so you can see the exact result before copying.
5. Copy the CSS code — click "Copy CSS Code" to grab the generated background property and paste it directly into your stylesheet.

Linear gradients — direction and angle

A linear gradient transitions colors along a straight line. The direction is controlled by an angle or a keyword. 0° points upward (bottom to top). Angles increase clockwise. Here are the most-used values:

/* Top to bottom */
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);

/* Left to right */
background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);

/* Diagonal (most popular) */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Three-color gradient */
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);

/* Hard colour split (no blend) */
background: linear-gradient(90deg, #e74c3c 50%, #3498db 50%);

Radial gradients — shape and position

Radial gradients radiate outward from a center point. The shape can be circle (equal radius in all directions) or ellipse (default, stretches to fit the element):

/* Basic radial gradient */
background: radial-gradient(circle, #667eea 0%, #764ba2 100%);

/* Spotlight effect from top-left */
background: radial-gradient(circle at top left, #ffecd2 0%, #fcb69f 100%);

/* Soft glow on dark background */
background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

Creating CSS gradient backgrounds for common UI patterns

Gradient backgrounds are used across almost every modern UI. Here are the most practical patterns:

• Hero section background — a full-viewport diagonal gradient gives depth without images: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
• Dark overlay on image — fade image to black for text legibility: background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.8) 100%)
• Gradient text — apply gradient as background then clip to text: background-clip: text; -webkit-text-fill-color: transparent
• Gradient button — subtle shading adds depth: background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
• Card border gradient — use border-image with a gradient for colourful card borders

Color stops and hard transitions

Color stops define where each color starts and ends. By default, colors transition smoothly between stops. To create a hard edge with no transition, place two stops at the same position:

/* Hard split — no blending */
background: linear-gradient(red 50%, blue 50%);

/* CSS-only stripes */
background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);

10 ready-to-use CSS gradient recipes

Copy any of these directly into your CSS. All are production-ready and tested across browsers:

• Sunset: linear-gradient(135deg, #f5af19 0%, #f12711 100%)
• Ocean: linear-gradient(135deg, #2980b9 0%, #6dd5fa 50%, #ffffff 100%)
• Forest: linear-gradient(135deg, #134e5e 0%, #71b280 100%)
• Purple haze: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
• Rose gold: linear-gradient(135deg, #f4c2c2 0%, #c9a0a0 100%)
• Midnight: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)
• Peach: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)
• Northern lights: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)
• Subtle card: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)
• Deep space: radial-gradient(ellipse at center, #1a1a2e 0%, #0f3460 100%)

Browser support

Linear and radial gradients are supported in all browsers released after 2012. The -webkit- prefix is no longer required for modern browsers. This tool generates clean, prefix-free CSS that works in Chrome, Firefox, Safari, and Edge.

CSS Code Generated Locally

This tool runs entirely in your browser. No data is sent to any server.

Frequently Asked Questions