Drawing with CSS Radial Gradient, you say?

Codepen: http://codepen.io/sashatran/full/GrwVXr

I bet this is what’s in your mind when you clicked into this post :)

Many people thinks that radial gradient is only limited to the example above.

But CSS radial gradient can do a lot more! For an example, the Captain America logo above. If the stopping color is the same as the start color, you’ll be able to create a solid color.

With this trick, we could avoid typing lots of repeated codes.

radial-gradient(start-color, stop-color);
% is the stop position, according to w3school.

The code for Captain America Logo

background: radial-gradient(
$blue 0%, $blue 35%,
$red 0%, $red 50%,
white 0%, white 60%,
$red 0%, $red 90% );

What you’ll be able to create with this?

Single Div Coffee

http://codepen.io/sashatran/full/XpObob/
background: radial-gradient(#FDD692 0%, #FDD692 48%,
#EEB868 60%, #DDA15E 0%, #DDA15E 80%);

You can also watch me speed code this on Youtube

Single Div Target Logo

http://codepen.io/sashatran/pen/ggqapj
background: radial-gradient($red 30%, white 0%,
white 50%, $red 0%, $red 80%);

Resource: CSS Tricks,

Useful tools: Fresh Background Gradient, Coolors.co

After you’ve read this, go make something amazing and show me your work! Tweet to me @sa_sha26 !