Drawing with CSS Radial Gradient, you say?
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.
% is the stop position, according to w3school.
The code for Captain America Logo
$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?
background: radial-gradient(#FDD692 0%, #FDD692 48%,
#EEB868 60%, #DDA15E 0%, #DDA15E 80%);
You can also watch me speed code this on Youtube
background: radial-gradient($red 30%, white 0%,
white 50%, $red 0%, $red 80%);
Resource: CSS Tricks,
After you’ve read this, go make something amazing and show me your work! Tweet to me @sa_sha26 !