Radial gradients in CSS allow you to create smooth transitions between two or more colors radiating from an origin. Unlike linear gradients, which transition colors along a straight line, radial gradients transition colors in a circular or elliptical pattern.
Syntax
background: radial-gradient([shape size at position], start-color, ..., last-color);
1. shape: Defines the shape of the gradient. It can be circle or ellipse.
2. size: Defines the size of the gradient. Options include closest-side, farthest-side, closest-corner, farthest-corner.
3. position: Defines the center of the gradient. It can be specified in keywords (center, top, bottom, left, right) or percentages.
4. colors: Defines the colors to be used in the gradient. You can specify multiple colors, and optionally add color stops.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Basic Radial Gradient</title> <style> .gradient { width: 300px; height: 300px; background: radial-gradient(red, green); } </style> </head> <body> <div class="gradient"></div> </body> </html>
Above snippet generate below screen.
Radial Gradient with Shape and Size
This example shows a radial gradient with an elliptical shape and a specific size.
withShapeSize.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Radial Gradient with Shape and Size</title> <style> .gradient { width: 500px; height: 300px; background: radial-gradient(ellipse closest-side at center, yellow, green); } </style> </head> <body> <div class="gradient"></div> </body> </html>
Above snippet generate below screen.
Radial Gradient with Multiple Colors
This example demonstrates a radial gradient with multiple color stops.
multipleColors.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Radial Gradient with Multiple Colors</title> <style> .gradient { width: 300px; height: 300px; background: radial-gradient(circle at 50% 50%, red, yellow, green, blue); } </style> </head> <body> <div class="gradient"></div> </body> </html>
Radial Gradient with Positioning
This example shows a radial gradient with a custom position.
positioning.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Radial Gradient with Positioning</title> <style> .gradient { width: 300px; height: 300px; background: radial-gradient(circle at 70% 30%, red, blue); } </style> </head> <body> <div class="gradient"></div> </body> </html>
Previous Next Home
No comments:
Post a Comment