Gradient texts

Use on ‘flat’ backgrounds. Two methods.

gbc-gradient-text–accent-3-accent-1-accent-2

CSS gradient text works by applying a gradient as a background to text and then using properties to ensure that only the text itself shows the gradient, while the rest of the background remains transparent. This effect can be achieved using CSS properties like background-image, background-clip, and text-fill-color.

gbc-gradient-text–accent-1-accent-2

Other gradient

H2 with core block

• Use Gradient Text(-webkit-background-clip: text) for simple gradient text effects in projects primarily targeting modern WebKit-based browsers (Chrome, Safari).
• Use Background Image Clipping if you need broader browser support or require more complex background management.

H2 with line gradient

Test other method.

Misschien leuk een animatie op een kop zoals in deze instructievideo

En

h1 {
gradient css...
pointer-events:none;

 animation: fade 1s ease-in 1s;
opacity: 0;
}
@keyframes fade {
0% {
opacity:0;
}
100% {
opacity:1;
}
}