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

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