Alan Simpson

Alan Simpson

Web Coder Tools

More Tools

Super Simple CSS Color Gradient

Learn about this →  Watch video tutorials

CSS 3 offers lots of ways to define color gradients. If you're looking for a simple two-color gradient, this page will create the code for you. Make your choices and then copy/paste code from the Code box below.

Click your Pattern

Choose a Predefined Color Scheme...

...or enter your own color hex codes and click Go

Color 1 Hex:  Color 2 Hex: 
Copy the code below to your CSS style rule.

* Adoble Color CCC is a good resource to find colors that don't clash. If you need a more complex gradient with multiple colors and stops, see the links below.