Online CSS Gradient Tool
CSS Gradient on iloinen pieni verkkosivusto ja ilmainen työkalu, jonka avulla voit luoda gradienttitaustan verkkosivustoille.
CSS-liukuvärien avulla voit näyttää tasaiset siirtymät kahden tai useamman määritetyn värin välillä.
CSS määrittelee kahden tyyppisiä gradientteja:
- Lineaariset kaltevuudet (menee alas/ylös/vasemmalle/oikealle/diagonaalisesti)
- Säteittäiset gradientit (keskipisteen mukaan)
Lineaariset CSS-gradientit
Lineaarisen gradientin luomiseksi sinun on määritettävä vähintään kaksi väripistettä. Väripysäytit ovat värejä, joiden välillä haluat tehdä tasaisia siirtymiä. Voit myös määrittää aloituspisteen ja suunnan (tai kulman) sekä gradienttitehosteen.
Syntaksi
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
CSS Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
