CSS Gradient
cssgradient.io
CSS Gradient – Generator, Maker, and Background
As a free CSS gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
Gradients
Looking for gradient inspiration? You’ve come to the right place. Browse our nicely curated collection of beautiful gradients in all colors: blue, red and more.
Color Shades
Color shades are lighter and darker variations of a particular color, created by adding white or black. Explore shades of red, blue, green, yellow, purple and pink.
Backgrounds
Discover the best gradient backgrounds from a curated collection of the ultimate list of gradient sites. With 1000+ gradients, it's easy to find the 👌 color!
CSS Gradient Text
Add eye-catching gradient effects to your website text using pure CSS. Learn how to create vibrant, image-free text gradients with step-by-step syntax examples and tips.
WebGradients
webgradients.com
WebGradients - Free CSS Gradients for Backgrounds and UI by itmeo
WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment! We've also prepared a .PNG version of each gradient.
Videos
Modern CSS Gradients Tutorial — From Basics to Advanced Design ...
05:56
How to create a gradient background - Quick tutorial - YouTube
01:18
Add Gradient Color | HTML and CSS Tutorial - YouTube
05:00
🔥 How to Add a Stunning Color Gradient in HTML Using CSS 🎨 ...
13:39
CSS Tutorial #48 - Color Gradients in CSS | Programming For Beginners ...
How To Add HTML Gradient Background Image / CSS Gradient Tutorial ...
W3Schools
w3schools.com › css › css3_gradients.asp
CSS Gradients
Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect. background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Shay Howe
learn.shayhowe.com › html-css › setting-backgrounds-and-gradients
Setting Backgrounds & Gradients - Learn to Code HTML & CSS
Learn how to add background colors, images, gradients, and combinations of the two with HTML and CSS. See whats new with CSS3 background properties and values.
CSS Gradient
cssgradient.io › gradient-backgrounds
Gradient Backgrounds – 🌈 The Best Gradient Sites All in One Place
Discover the best gradient backgrounds from a curated collection of the ultimate list of gradient sites. With 1000+ gradients, it's easy to find the 👌 color!
uiGradients
uigradients.com
uiGradients - Beautiful colored gradients
A handpicked collection of beautiful color gradients for designers and developers
Quackit
quackit.com › html › templates › cards › background_gradient_with_centered_text.cfm
Background Gradient with Centered Text
Download a free, responsive HTML and CSS template for a bold card with a gradient background and centered text. Perfect for calls-to-action and vibrant content highlights.
CodePen
codepen.io › P1N2O › pen › pyBNzX
🌈 Pure CSS Animated Gradient Background
body { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; height: 100vh; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: ...
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Values › gradient › linear-gradient
linear-gradient() - CSS - MDN Web Docs - Mozilla
body { background: linear-gradient( to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80% ); }
Top answer 1 of 5
8
This cannot be done in html but it can in css (specifically css3).
You would have to add a class to the body of your page or a div within it that surrounds all of your content. You can use a css gradient generator to get the code to put in your css class.
Here is a simple example on a div: http://jsfiddle.net/8fDte/
You can do the following as well if you want it on the body. Note you have to link to the css file that will store you styles.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="PathToCss.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY class="MyGradientClass">
</BODY>
</HTML>
CSS
This code can be generated by a css gradient generator like the one linked above.
.MyGradientClass
{
height:200px;
background-image: linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -o-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -moz-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -webkit-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -ms-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(113,61,62)),
color-stop(0.63, rgb(147,92,93)),
color-stop(0.82, rgb(177,120,121))
);
}
Edit:
As Rory mentioned, CSS3 is not fully supported by all modern browsers. However, there are some tools such as PIE CSS to help IE to accept some CSS3 functionality.
2 of 5
2
It's not possible to make a gradient with HTML alone. There are new features in CSS3 which allow you to create a gradient, however these are not fully supported by all browsers.
If you'd like to read some more about CSS3 gradients, read this article
There is also a handy online tool which will create the CSS code to create a gradient of your specification, here.
ColorZilla
colorzilla.com › gradient-editor
Ultimate CSS Gradient Generator - ColorZilla.com
Support for full multi-stop gradients with IE9 (using SVG). Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:
MakeUseOf
makeuseof.com › home › programming › 35 stylish css background gradient examples
35 Stylish CSS Background Gradient Examples
July 3, 2023 - CSS gradients provide better control and performance over using an actual image file of a gradient that you can create using tools like Adobe Illustrator. Use the background-image CSS property to declare gradients as a background.
HTML Dog
htmldog.com › guides › css › advanced › gradients
Gradients | HTML Dog
background: linear-gradient(to right, orange, red); ... Note that the “to” is excluded with angles because there isn’t an explicit destination. Link To Us! If you've found HTML Dog useful, please consider linking to us.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › CSS_images › Using_CSS_gradients
Using CSS gradients - MDN Web Docs
Unlike linear gradients, you can specify the size of radial gradients. Possible values include closest-corner, closest-side, farthest-corner, and farthest-side, with farthest-corner being the default. Circles can also be sized with a length, and ellipses a length or percentage. This example uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box. ... .radial-ellipse-side { background: radial-gradient( ellipse closest-side, red, yellow 10%, dodgerblue 50%, beige ); }
Nicepage
nicepage.com › k › gradient-html-templates
Gradient HTML Templates | Nicepage
Table With Gradient HTML Template · Fully Responsive Templates Download · CSS Template For Subscribe Form On Gradient Background · About Me Text On Gradient - Free Template · Contact Form With Gradient - Responsive HTML5 Template · 3 Columns With Gradient Background HTML Template ·
Top answer 1 of 7
119
As of today, none of the above are working. The linear gradient is repeating itself.
To stretch the gradient over the entire page you have to add this in the css:
body {
background: linear-gradient(to left top, blue, red);
background-attachment: fixed; /*edit*/
}
2 of 7
66
To have the gradient fill the viewport, give the <html> element a height of 100%: fiddle
html {
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #70bg32;
background-repeat:no-repeat;
background: -webkit-linear-gradient( to left top, blue, red);
background: -moz-linear-gradient( to left top, blue, red);
background: -ms-linear-gradient( to left top, blue, red);
background: -o-linear-gradient( to left top, blue, red);
background: linear-gradient( to left top, blue, red);
}
To prevent the gradient from repeating past the visible section of the viewport (assuming there was a scrollbar), replace height: 100%; with min-height: 100%;.
html {
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #70bg32;
background-repeat:no-repeat;
background: -webkit-linear-gradient( to left top, blue, red);
background: -moz-linear-gradient( to left top, blue, red);
background: -ms-linear-gradient( to left top, blue, red);
background: -o-linear-gradient( to left top, blue, red);
background: linear-gradient( to left top, blue, red);
}ColorSpace
mycolor.space › gradient
ColorSpace - CSS Gradient Color Generator
New Feature: You can now create a gradient out of 3 colors! ... CSS Code: background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
W3Schools
w3schools.com › cssref › func_linear-gradient.php
CSS linear-gradient() function
#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } Try it Yourself » ... If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: sales@w3schools.com · ...
Gravitypdf
docs.gravitypdf.com › backgrounds
Custom Template Background Colour, Gradient and Image Support in PDFs | Gravity PDF
December 11, 2025 - However, some gradient line definitions like to right corner or to bottom left don't work as expected – but right, left, or 45degs works correctly. ... <!-- Background Linear Gradient --> <div style="background-image: linear-gradient(red, orange); height: 20mm"> This is my content </div> <!-- Left-To-Right Background Linear Gradient --> <div style="background-image: linear-gradient(right, red, orange); height: 20mm"> This is my content </div> <!-- Diagonal Background Linear Gradient --> <div style="background-image: linear-gradient(45deg, red, orange); height: 20mm"> This is my content </div> <!-- Multi-colour Linear Gradient --> <div style="background-image: linear-gradient(left, red, #f06d06, rgb(255, 255, 0), green); height: 20mm"> This is my content </div>