Design Tool
CSS Gradient Generator
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.
Quick Presets
background: linear-gradient(135deg, #4A6CF7, #2980b9);What are CSS gradients?
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.
How to use this tool
- 1
Pick a preset to start from a pre-tested colour combination, or set your own hex colours in Color 1 and Color 2.
- 2
Choose gradient type: Linear (directional, like a sunrise) or Radial (radiates from centre, like a spotlight).
- 3
For linear gradients, adjust the angle slider. 0° = top to bottom, 90° = left to right, 135° = top-left to bottom-right.
- 4
Watch the live preview update in real time — what you see is exactly what the CSS produces.
- 5
Click 'Copy CSS' and paste the background property into your Canvas HTML Template style attribute or custom CSS.
- 6
For text gradients, add -webkit-background-clip: text and -webkit-text-fill-color: transparent alongside the background property.
Gradient direction reference
| 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 |
Frequently Asked Questions
How do I apply a CSS gradient to text?
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, #4A6CF7, #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.
What is the difference between linear and radial gradients?
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.
How do I add transparency to a CSS gradient?
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, #4A6CF7, transparent).
Are CSS gradients supported in all browsers?
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.
Ready to build a full HTML layout?
Canvas Builder generates production-ready Canvas HTML Template pages with custom gradients, colours, and copy already applied.
Try Canvas BuilderThat gradient deserves a full page
Canvas Builder builds a complete site using your color direction — gradients, sections, and all.
Build a full site from this