Gradient Generator

Use the following CSS3 gradient generator to create a gradient for your website.

Gradient Color 1: Color 2: Direction: ↑ ↗ → ↘ ↓ ↙ ← ↖ Add browser prefixes? Text Text: Optional text... Font: (Inherit) Arial, Sans-Serif Arial Black, Sans-Serif Corbel, Sans-Serif Geneva, Sans-Serif Helvetica, Sans-Serif 'Lucida Grande', Sans-Serif Tahoma, Sans-Serif Trebuchet MS, Sans-Serif Verdana, Sans-Serif Sans-Serif (generic) Baskerville, Serif Garamond, Serif Georgia, Serif Times New Roman, Serif Palatino, Serif Serif (generic) Comic Sans MS Copperplate Cursive (generic) Fantasy (generic) Papyrus Brush Script MT Consolas, Monospace Courier, Monospace Courier New, Monospace Monaco, Monospace Monospace (generic) Size: Centimeters Millimeters Inches Points Picas Pixels Em Ex Ch Rem Vw Vh Vmin Vmax Percent OR None (Inherit) XX-Small X-Small Small Medium Large X-Large XX-Large Smaller Larger Line-Height: (Inherit) Normal Percent Centimeters Millimeters Inches Points Picas Pixels Em Ex Ch Rem Vw Vh Vmin Vmax Color: Box Element: <article> <aside> <address> <blockquote> <div> <footer> <header> <main> <nav> <p> <pre> <section> Width: Centimeters Millimeters Inches Points Picas Pixels Em Ex Ch Rem Vw Vh Vmin Vmax Percent Height: Centimeters Millimeters Inches Points Picas Pixels Em Ex Ch Rem Vw Vh Vmin Vmax Percent Padding: (Inherit) Percent Centimeters Millimeters Inches Points Picas Pixels Em Ex Ch Rem Vw Vh Vmin Vmax Border Color: Width: Centimeters Millimeters Inches Points Picas Pixels Em Ex Ch Rem Vw Vh Vmin Vmax Style: Solid Dashed Dotted Double Groove Ridge Inset Outset

The Code Here is the code that was generated:

Customizing The CSS

The CSS is the code between the <style></style> tags. These are the codes that determine the gradient as well as other styles. Here's an explanation of CSS gradients which includes usage examples.

If you intend to use the same styles across many pages (a whole website, for example), you should move them to an external style sheet.