Animations
CSS Gradients
Applying CSS Gradients
CSS gradients create linear or radial color transitions for backgrounds.
Introduction to CSS Gradients
CSS gradients allow you to display smooth transitions between two or more specified colors. These gradients can be applied to backgrounds to create visually appealing designs without using images.
Types of CSS Gradients
There are two main types of gradients in CSS:
- Linear Gradients: Transition colors along a straight line.
- Radial Gradients: Transition colors from a central point outward in a circular or elliptical shape.
Creating Linear Gradients
Linear gradients transition colors along a straight line, which can be horizontal, vertical, or at any angle.
In the example above, the gradient transitions from red to yellow horizontally. You can also specify angles or directions such as to bottom or 45deg.
Creating Radial Gradients
Radial gradients transition colors from a central point and can form circular or elliptical shapes.
This example creates a circular gradient transitioning from red to yellow to green. You can change circle to ellipse for an elliptical gradient.
Advanced Gradient Techniques
Gradients can be complex with multiple color stops and transparency effects. You can also use repeating gradients for patterns.
This example demonstrates a linear gradient with multiple color stops, creating a rainbow effect.
Repeating gradients can create striped or patterned backgrounds, as shown in this example where yellow and orange stripes repeat.
