Blog

UX Design

CSS Gradients in 3 Easy Steps

Learn how to create CSS Gradient backgrounds
Learn how to create CSS Gradient backgrounds

Starting to think monochromatic backgrounds on websites is a bit of a snooze-fest? Try out the new trend in web design: create CSS gradients. Here are 3 easy steps to get started.

Step 1: Choose your colors

Color authority Pantone has dubbed two colors for 2016: Rose Quartz and Serenity. (Je t' aime!)

CSS Gradients in 3 Easy Steps. Starting to think monochromatic backgrounds on websites is a bit of a snooze-fest? Try out the new trend in
CSS Gradients in 3 Easy Steps. Starting to think monochromatic backgrounds on websites is a bit of a snooze-fest? Try out the new trend in

For the last decade, I thought Pantone colors of the year were drab, flat and uninspiring. This year, I am absolutely in love with Rose Quartz (#89abe3) and Serenity (#F2DDDE.)  The color story will include rosy warm Rose Quartz and fresh Serenity.

PantoneRoseQuartz_Serenity_600
PantoneRoseQuartz_Serenity_600

Step 2: Open CodePen and Create a Div Class in your HTML file

Open CodePen. Start with the HTML. Create a div with the class name of "gradient."

<div class="gradient">
</div>

 

Step 3: Code up the CSS

Gradients are usually declared in CSS, not as actual image files. Why? CSS gradients give you better control and performance.

Within the CSS, copy and paste the following code:

.gradient {
  height: 550px;
  background: linear-gradient(315deg, #89abe3, #f2ddde);
}