Design Tool
Build linear and radial CSS gradients with a live preview and copy-ready code. Use generated gradients for Canvas HTML Template hero backgrounds, section dividers, button overlays, and text effects with Bootstrap 5.
background: linear-gradient(135deg, #1abc9c, #2980b9);CSS gradients are generated images that transition smoothly between two or more colours. Unlike a flat background colour, gradients create depth, motion, and visual interest. The two main types are linear-gradient() (transitions along a line at an angle) and radial-gradient() (radiates from a centre point). Both are pure CSS — no images required.
Gradients are commonly used in Canvas HTML Template hero sections as background overlays, in CTA buttons for hover states, and as decorative section dividers. A linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)) overlay on a background image keeps text readable while preserving the image. Applied to text with -webkit-background-clip: text, gradients create striking display typography.
Bootstrap 5 includes a .bg-gradient utility that applies a subtle semi-transparent gradient overlay, but for custom gradients with specific colours and angles, you need to write the background property directly — exactly what this generator produces.
Pick a preset to start from a pre-tested colour combination, or set your own hex colours in Color 1 and Color 2.
Choose gradient type: Linear (directional, like a sunrise) or Radial (radiates from centre, like a spotlight).
For linear gradients, adjust the angle slider. 0° = top to bottom, 90° = left to right, 135° = top-left to bottom-right.
Watch the live preview update in real time — what you see is exactly what the CSS produces.
Click 'Copy CSS' and paste the background property into your Canvas HTML Template style attribute or custom CSS.
For text gradients, add -webkit-background-clip: text and -webkit-text-fill-color: transparent alongside the background property.
| Direction / Angle | CSS Value | Visual Direction |
|---|---|---|
| 0° / to bottom | linear-gradient(0deg, ...) | Bottom to top |
| 90° / to right | linear-gradient(90deg, ...) | Left to right |
| 135° | linear-gradient(135deg, ...) | Top-left to bottom-right (diagonal) |
| 180° / to top | linear-gradient(180deg, ...) | Top to bottom |
| 270° / to left | linear-gradient(270deg, ...) | Right to left |
| 45° | linear-gradient(45deg, ...) | Bottom-left to top-right |
| circle | radial-gradient(circle, ...) | Circular from centre |
| ellipse | radial-gradient(ellipse, ...) | Elliptical from centre |
To apply a gradient to text in CSS, set the background to a gradient, then use -webkit-background-clip: text and -webkit-text-fill-color: transparent. Example: .gradient-text { background: linear-gradient(135deg, #1abc9c, #2980b9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }. This works in all modern browsers. In Canvas HTML Template hero sections, this technique creates eye-catching display headings.
A linear gradient transitions colours along a straight line at a specified angle: linear-gradient(135deg, #color1, #color2). A radial gradient radiates from a centre point outward in a circular or elliptical shape: radial-gradient(circle, #color1, #color2). Linear gradients are more commonly used for backgrounds and hero sections; radial gradients work well for spotlight effects, hover glows, and layered depth.
Use rgba() or the CSS color with an alpha channel: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0)). This creates a gradient from 70% opaque black to fully transparent — commonly used to overlay text on hero images. You can also use the 'transparent' keyword: linear-gradient(to right, #1abc9c, transparent).
Yes — linear-gradient and radial-gradient have been fully supported in all modern browsers since 2013. The -webkit- prefix is no longer required for basic gradient syntax, though some advanced features (like conic-gradient) have variable support. Canvas HTML Template pages use standard linear and radial gradients without prefixes.
Canvas Builder generates production-ready Canvas HTML Template pages with custom gradients, colours, and copy already applied.
Try Canvas Builder