GRADIENT EFFECTS




Radial Gradient(Ellipse)









 

Radial Gradient(Ellipse)

Radial Gradient(Circle)









 

Radial Gradient(Circle)

Radial Gradient(Square)









Radial Gradient(Square)

Linear Gradient From Top to Bottom

This linear gradient starts at the top with Aquamarine color, transitioning to Teal color at Bottom:



 

Linear Gradient From Top to Bottom

This linear gradient starts at the top with Aquamarine color, transitioning to Teal color at Bottom:

Linear Gradient - Left to Right

This linear gradient starts From Left with Aquamarine color, transitioning to Teal color at Right:



 

Linear Gradient - Left to Right

This linear gradient starts From Left with Aquamarine color, transitioning to Teal color at Right:

Linear Gradient - Diagonal

This linear gradient starts at top left with Aquamarine color, transitioning to Teal :



 

Linear Gradient - Diagonal

This linear gradient starts at top left with Aquamarine color, transitioning to Teal :

Linear Gradients - Using Different Angles

0deg

90deg

180deg

-90deg


Linear Gradients - Using Different Angles

0deg

90deg

180deg

-90deg

3 Color Stops (evenly spaced)

 

7 Color Stops (evenly spaced)

 

3 Color Stops (not evenly spaced)



 

Linear Gradient - Transparency



 

Repeating Linear Gradient



 

A repeating gradient on 45deg axe starting Aquamarine and finishing Teal:



 

A repeating gradient on 190deg axe starting Aquamarine and finishing Teal:



A repeating gradient on 90deg axe starting Aquamarine and finishing Teal:



 

Radial Gradient - Differently Spaced Color Stops