Gradients

Quick Code

Copy to clipboard

Introduction[]

Gradients are also known as the 'Ombre' effect'(s), which are colors that fade into different colors.

Gradients are used for text or backgrounds and can use basic colors such as, Hex codes, and RGB/RGBA for color specification.

Background Gradient[]

Linear Gradient (with div)[]

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

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

You can change the amount of colors or the direction it points. By replacing the 'to left' with to top right, or another direction specification, you change the direction the gradient goes in. By changing the codes starting with #, you change the colors in the gradient.

Free Patterns[]

Black/Gray:

Text goes here

Code:

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

White/Gray:

Text goes here

Code:

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

LightPink/LightGreen:

Text goes here

Code:

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

Blue/White:

Text goes here

Code:

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

PastelGreen/LightGreen:

Text goes here

Code:

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

Red/Orange:

Text goes here

Code:

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

Dark/LightPurple:

Text goes here

Code:

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

Yellow/Green:

Text goes here

Code:

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

Magenta/DarkCyan:

Text goes here

Code:

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

MediumSpringGreen/SpringGreen:

Text goes here

Code:

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

DeepPink/Lime/Cyan

Text goes here

Code:

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

NeonPurple/NeonPink

Text goes here

Code:

<div style="background: linear-gradient(to right, #b026ff, #ff44cc);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:

Text goes here

Code:

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

Purple/Violet/Pink:

Text goes here

Code:

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

Blue/DarkBlue:

Text goes here

Code:

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

Aqua/Yellow:

Text goes here

Code:

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

Lime/Cyan:

Text goes here

Code:

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

Orange/Black:

Text goes here

Code:

<div style="background:radial-gradient(orange,black);color:white">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:

Text goes here

Code:

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

White/Gray:

Text goes here

Code:

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

Azure/Powderblue

Text goes here

Code:

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

Wheat/Tan

Text goes here

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,cyan,blue,navy); -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!

Pixel Addition[]

The pixel attribute determines at which specific pixel 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>

Giving you this

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>

See how now there's more cyan?

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>

Here it blends normally

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>

Now it doesn't blend at all!

It also works with radial gradients:

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

Insert
text
here

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>

Text here

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>

^^
This code will give you a normal gradient

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

^^
This code will give you evenly split colors

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

Text goes here

References[]

Gradient Generator Sample

Gradients

Contents

Introduction[]

Background Gradient[]

Linear Gradient (with div)[]

Free Patterns[]

Radial Gradient (with div)[]

Free Patterns[]

Conic Gradient (with div)[]

Free Patterns[]

Highlight Gradient[]

Linear Gradient (with span)[]

Free Patterns[]

Radial Gradient (with span)[]

Free Designs[]

Text Gradient[]

Border Gradient[]

Pixel Addition[]

Solid Colors[]

Percentage Addition[]

References[]

Fan Feed