Gradients are also known as the 'Ombre' effects. Colors fade into each other.

Gradients are often used for backgrounds, though they have multiple uses. They can use Hex codes, named colors, and codes like RGB/RGBA for color specification.

Considerations

Good gradients should add to user experience, not distract from the content. Make sure to promote accessibility and readability. Here are some ways to do that:

• Avoid neon colors that could hurt sensitive eyes (e.g. cyan and lime green).
• Ensure that contrast between text color and the background is good.
• Keep it simple and non-distracting.
• Use padding so the text doesn't get too close to the edges.

Fallbacks: Make sure you add a fallback color. Some browsers get buggy with gradients. If the gradient doesn't render properly, a solid color should take its place. For example, if you are doing a gradient background, make sure to specify a background-color just in case.

Background Gradients

Linear Gradient (with div)

Linear gradients go from up to down, left to right, vice versa, vice versa. The default is top to bottom.^[1] The code is as follows -

<div style="background: linear-gradient(to left, LightCyan, PaleTurquoise);">Text goes here.</div>

When you add text color and a fallback color, you get:

<div style="background-color: LightCyan; background: linear-gradient(to left, LightCyan, PaleTurquoise); color: black;">Text goes here.</div>

You can add as many colors as you want in the list.

You can also specify your angle. You can use some English terms like "to top right." You can also use degrees. For degrees, 0deg means to top, 90deg means to right, 180deg means to bottom, and 270deg means to left. You can use any number you'd like, e.g. 42deg.^[1]

Here's an example of a 3-color gradient:

Free Patterns

Black/Gray:

Code:

<div style="background: linear-gradient(to right, black, white); color: white;">Text goes here</div>

White/Gray:

Code:

<div style="background: linear-gradient(to right, #f4f4e5 0%, #d2d2d2 100%)">Text goes here</div>

LightPink/LightGreen:

Code:

<div style="background: linear-gradient(to right, lightpink 0%, lightgreen 100%)">Text goes here</div>

Blue/White:

Code:

<div style="background: linear-gradient(to right, #b0e0e6 0%, white 100%)">Text goes here</div>

PastelGreen/LightGreen:

Code:

<div style="background: linear-gradient(to right, #aef5b7 0%, #e2f5ae 100%)">Text goes here</div>

Red/Orange:

Code:

<div style="background: linear-gradient(to right, #e55d5d 0%, #f2cf79 100%)">Text goes here</div>

Dark/LightPurple:

Code:

<div style="background: linear-gradient(to right, #5750a5 0%, #cfc4ff 100%); color:white;">Text goes here</div>

Yellow/Green:

Code:

<div style="background: linear-gradient(to right, #f1f44b 0%, #9ce359 100%)">Text goes here</div>

Magenta/DarkCyan:

Code:

<div style="background: linear-gradient(to right, magenta, darkcyan)">Text goes here</div>

MediumSpringGreen/SpringGreen:

Code:

<div style="background: linear-gradient(to right, mediumspringgreen, springgreen)">Text goes here</div>

DeepPink/Lime/Cyan

Code:

<div style="background: linear-gradient(to right, deeppink, lime, cyan)">Text goes here</div>

NeonPurple/NeonPink

Code:

<div style="background: linear-gradient(to right, #b026ff, #ff44cc);color:white">Text goes here</div>

White/LightPurple/LightBlue

Code:

<div style="background: linear-gradient(to right, white, #ac85e6, #81cef7);color:white">Text goes here</div>

Radial Gradient (with div)

A radial gradient has circular patterns. Below are just a few examples; feel free to alter them to your liking! The code is as follows -

<div style="background:radial-gradient(color, color, color);">Text goes here</div>

Free Patterns

Silver/Gray:

Code:

<div style="background:radial-gradient(gray,silver);">Text goes here</div>

Purple/Violet/Pink:

Code:

<div style="background:radial-gradient(purple,darkviolet,deeppink);color:white;">Text goes here</div>

Blue/DarkBlue:

Code:

<div style="background:radial-gradient(blue,darkblue);color:white;">Text goes here</div>

Aqua/Yellow:

Code:

<div style="background:radial-gradient(aqua, yellow);">Text goes here</div>

Lime/Cyan:

Code:

<div style="background:radial-gradient(lime, cyan);">Text goes here</div>

Orange/Black:

Code:

<div style="background:radial-gradient(orange,black);color:white">Text Goes Here</div>

LightPink/Blue:

Code:

<div style="background:radial-gradient(lightpink,blue);">Text goes here</div>

White/LawnGreen:

Code:

<div style="background:radial-gradient(white,lawngreen)">Text Goes Here</div>

Conic Gradient (with div)

A conic gradient has conic patterns. Below are just a few examples; feel free to alter them to your liking! The code is as follows -

<div style="background:conic-gradient(color, color, color);">Text goes here</div>

Free Patterns

Black/Gray:

Code:

<div style="background: conic-gradient(black, white); color: white;">Text goes here</div>

White/Gray:

Code:

<div style="background: conic-gradient(#f4f4e5 0%, #d2d2d2 100%)">Text goes here</div>

Azure/Powderblue

Code:

<div style="background: conic-gradient(azure,powderblue)">Text goes here</div>

Wheat/Tan

Code:

<div style="background: conic-gradient(wheat,tan)">Text goes here</div>

Highlight Gradient

Linear Gradient (with span)

Linear gradients go from up to down, left to right, vice versa, vice versa. The code is as follows -

<span style="background: linear-gradient(to right, color, color, color);">Text goes here</span>

Free Patterns

Black/Gray:

Text goes here

Code:

<span style="background: linear-gradient(to right, black, white); color: white;">Text goes here</span>

White/Gray:

Text goes here

Code:

<span style="background: linear-gradient(to right, #f4f4e5 0%, #d2d2d2 100%)">Text goes here</span>

PastelBlue/Pink:

Text goes here

Code:

<span style="background: linear-gradient(to right, #f5aeae 0%, #aef5cd 100%)">Text goes here</span>

Blue/White:

Text goes here

Code:

<span style="background: linear-gradient(to right, #b0e0e6 0%, white 100%)">Text goes here</span>

PastelGreen/LightGreen:

Text goes here

Code:

<span style="background: linear-gradient(to right, #aef5b7 0%, #e2f5ae 100%)">Text goes here</span>

Red/Orange:

Text goes here

Code:

<span style="background: linear-gradient(to right, #e55d5d 0%, #f2cf79 100%)">Text goes here</span>

DarkPurple/LightPurple:

Text goes here

Code:

<span style="background: linear-gradient(to right, #5750a5 0%, #cfc4ff 100%); color:white;">Text goes here</span>

Yellow/Green:

Text goes here

Code:

<span style="background: linear-gradient(to right, #f1f44b 0%, #9ce359 100%)">Text goes here</span>

Magenta/DarkCyan:

Text goes here

Code:

<span style="background: linear-gradient(to right, magenta, darkcyan)">Text goes here</span>

ForestGreen/LawnGreen:

Text goes here

Code:

<span style="background: linear-gradient(to right, forestgreen, lawngreen)">Text goes here</span>

Radial Gradient (with span)

A radial gradient has circular patterns. Below are just a few examples; feel free to alter them to your liking! The code is as follows -

<span style="background:radial-gradient(color, color, color)>Text goes here.  You can change the amount of colors.</span>

Free Designs

Silver/Gray:

Text goes here

Code:

<span style="background:radial-gradient(gray,silver);">Text goes here</span>

Purple/Violet/Pink:

Text goes here

Code:

<span style="background:radial-gradient(purple,darkviolet,deeppink);">Text goes here</span>

Blue/DarkBlue:

Text goes here

Code:

<span style="background:radial-gradient(blue,darkblue);color:white;">Text goes here</span>

Aqua/Yellow:

Text goes here

Code:

<span style="background:radial-gradient(aqua, yellow);">Text goes here</span>

Lime/Cyan:

Text goes here

Code:

<span style="background:radial-gradient(lime, cyan);">Text goes here</span>

Orange/Black:

Text goes here

Code:

<span style="background:radial-gradient(orange,black);color:white">Text Goes Here</span>

Text Gradient

To change the color of your text with a background gradient, the code you can use is:

-webkit-background-clip:text !important; -webkit-text-fill-color:transparent;

You must include this for the colors to stick on your text!

Example:

<span style="background:linear-gradient(90deg,navy,cyan,blue); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent;">Text Here</span>

Result

Border Gradient

Border gradients are similar to multi-style borders (see Borders), but use gradients instead. First, add a border:

border:_px solid

Then you can add the gradient!

border:_px solid; border-image: linear-gradient(to top left, color, color) 1;

See, look at how the border is a gradient!

You can also see how to make a round gradient border here!

Color locations

The location attribute determines at which specific pixel or percentage point you want a color to stop being solid. Start with a gradient code like this:

<div style="background:linear-gradient(to left, blue, cyan);">Insert text here</div>

Then add _px to the end of the different colors, which will change where it starts to blend!

<div style="background:linear-gradient(to left, blue 100px, cyan 200px);">Insert text here</div>

Solid Colors

You can also create solid sections with gradients by using pxs. Start with the basic gradient code with visual example:

<div style="background:linear-gradient(to right, white, blue);">Insert text here</div>

Then add pixel amounts that are the exact same as each other, so they can't blend at all

<div style="background:linear-gradient(to right, white 40px, blue 40px)">Insert text here</div>

It also works with radial gradients:

<div style="background: radial-gradient (white 10px, blue 10px);>Insert text here</div>

You can keep adding colors, too, but it's a bit more complicated. Now, most of the colors will have to be doubled, and have the same pixel amounts as the different color next to them. See below for a visual example:

<div style="background: linear-gradient(red 20px, orange 20px, orange 40px, yellow 40px, yellow 60px, green 60px, green 80px, blue 80px, blue 100px, indigo 100px, indigo 120px, purple 120px, purple 140px);">Insert text here</div>

To create precise patterns, the pixel component works best when used with a fixed height/width in mind, depending on the way the pattern is going.

Percentage Addition

The percentage addition to colors works similarly to the pixel addition seen above, but you do not have to have an exact height/width in mind for specific patterns to work; instead, it divides based on percentages of the full size. For example:

<div style="background: linear-gradient(to right, red 0%, pink 100%);">Insert text here</div>

<div style="background: linear-gradient(to right, red 50%, pink 50%);">Insert text here</div>

Mess around with the numbers and amounts of colors to get different results!

Rainbow/Gray:

Code:

<div style="background: linear-gradient(to right, #Ed103b, #f7ad32, #ffff2f, #5dee27, #85fbff, #733bc2, #cd89e0); "background:linear-gradient(#929292, #ababab, #d1d1d1:">Text goes here</div>

References

Gradient Generator Sample

• https://www.w3schools.com/css/css3_gradients.asp
• https://www.joshwcomeau.com/gradient-generator
• https://mdigi.tools/gradient-generator/
• https://www.cssportal.com/css-gradient-generator/
• https://colorkit.co/gradient-maker/d11d29-fcc2da/
• https://10015.io/tools/css-gradient-generator
• https://www.generateit.net/gradient/