To create a gradient text effect with CSS, we can make use of the property `background-clip: text` in combination with a linear or radial gradient. Here’s a simple example:
HTML:
```
CSS:
```
.gradient-text {
font-size: 60px;
background: linear-gradient(to right, red , blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
```
This code gives a gradient effect to the text that goes from red at the left to blue at the right. Please note that `-webkit-background-clip: text` and `-webkit-text-fill-color: transparent` are not standard CSS properties, they are specific to Webkit browsers like Chrome and Safari. For Firefox use the following CSS rule to achieve the same effect:
```
.gradient-text {
font-size: 60px;
background: linear-gradient(to right, red , blue);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
```
If you want to improve cross-browser compatibility, you could fall back to solid color text in unsupported browsers. Unlike gradients, `background-clip: text` won’t fall back gracefully. See the below CSS code:
```
.gradient-text {
font-size: 60px;
background: linear-gradient(to right, red , blue);
color: blue; /* fallback for non-webkit browsers */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
```
This will show a blue text color in browsers that do not support `background-clip: text`.
