Welcome to the first ever “Style Sheet Snacks” lesson! I am overjoyed to start this series as I hope to help give some tips on CSS3 as well as inspire you to try new ways to style your site, app, or components.

This first lesson is all about gradients, let’s talk about what a gradient is and how to create one with pure css.

What is a gradient?

A gradient in CSS is anything that had multiple effects and gradually changes from one to the other, or multiple. Elements usually have gradient color, opacity, or both. In this snack, we’re going to focus mostly on gradient backgrounds.

Linear Gradients

Linear Gradients are gradients that go in a single direction (horizontal or vertical). Let’s use a background gradient to style a square. We can use the attribute background: linear-gradient(red, yellow) in order to create a vertical gradient.

See the Pen Linear Background Gradient by The Datababe (@Thedatababe) on CodePen.

Similarly, we can go left to right using the keyword to right.

See the Pen BaBLwdN by The Datababe (@Thedatababe) on CodePen.

Radial Gradients

Radial gradients are just like they sounds. A gradient to goes out radially, or in a circle. In order to create a radial background, you can use a similar attribute to linear gradients except you can use the radial-gradient keyword.

background-image:radial-gradient(red, yellow)

See the Pen Radial Background Gradient by The Datababe (@Thedatababe) on CodePen.

Completely Customize the Gradient Direction

Gradients can be customizable even further by using multiple colors as well as angles and percentages of how far the color will go. For example, take a look at the Instagram logo. You’ll notice it has a gradient and has this very nice pink /purplish color , but it seems to be at an angle. Let’s recreate this in css!

See the Pen XWrjeeZ by The Datababe (@Thedatababe) on CodePen.

The above example is made by using a combination of radial and linear gradients (yes, you can use multiple in a single background!). Let’s take a look at the first gradient we used.

radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%),

circle tells us the shape of the gradient (radial can be either circle or ellipse).
farthest corner tells us where the gradient ends. This is the default, so the gradient will be as wide as the element (100px).
at 35% 90% represents the x and y position of the center of the gradient, respectively.
#fec564 is the color of the inner most point on the gradient, which is a yellow color.
transparent 50% is the color at the outer most point on the gradient. This will be the same yellow color, but at 50% opacity.

This should give you a good idea for a starting point at how this gradient was created.

Gradient Box Shadows

Okay, so this one isn’t exactly a gradient per-say, but it can look like one! With a few different box shadows you can actually make it look like you have a multicolored gradient.

See the Pen MWgjEXO by The Datababe (@Thedatababe) on CodePen.

Bonus: Text Background Gradients

See the Pen gOYwGoO by The Datababe (@Thedatababe) on CodePen.

Using gradients/background images as text backgrounds is one of my all time favorite style tricks! We even use it with our Style Sheet Snacks logo. It’s actually quite easy to do with just a few lines of css. (*note: this doesn’t work in every browser, but most modern ones have support).

Other Resources

We’ve only just touched the surface on gradients. For more information, check out a few of these resources:
https://cssgradient.io/resources/
https://www.w3schools.com/css/css3_gradients.asp
http://angrytools.com/gradient/

As always, feel free to leave comments in the comment section below! Happy Coding!