FANDOM


Gradients are colors fading into different colors.

A gradient can be used for text or backgrounds,and can use basic colors or Hex Codes.

Background GradientEdit

Linear GradientEdit

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 right, color, color, color);">Text goes here. You can change the amount of colors, or the direction it points.</div>

Free PatternsEdit

Black/Gray:Edit

Text goes here

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

White/Gray:Edit

Text goes here

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

Pastel Blue/Pink:Edit

Text goes here

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

Blue/White:Edit

Text goes here

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

Pastel Green/Light Green:

Text goes here

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

Red/Orange:Edit

Text goes here

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

Dark/Light Purple:Edit

Text goes here

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

Yellow/Green:Edit

Text goes here

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

Radial GradientEdit

A radial gradient has circular patterns. Below are just a few examples; feel free to alter them to your liking!

text

Code: <div style="background:radial-gradient(gray,silver);">text</div>

text

Code: <div style="background:radial-gradient(purple,darkviolet,deeppink);">text</div>

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.