Internetinis CSS gradientas – generatorius, kūrėjas ir fonas

Color

Internetinis CSS gradiento įrankis

CSS gradientas yra linksma svetainė ir nemokamas įrankis, leidžiantis sukurti svetainių gradiento foną. 

CSS gradientai leidžia rodyti sklandžius perėjimus tarp dviejų ar daugiau nurodytų spalvų.

CSS apibrėžia dviejų tipų gradientus:

  • Linijiniai gradientai (eina žemyn/aukštyn/kairėn/dešinėn/įstrižai)
  • Radialiniai gradientai (apibrėžiami pagal jų centrą)

CSS linijiniai gradientai

Norėdami sukurti linijinį gradientą, turite apibrėžti bent du spalvų stabdžius. Spalvų sustojimai yra spalvos, kurių perėjimus norite perteikti sklandžiai. Taip pat galite nustatyti pradžios tašką ir kryptį (arba kampą) kartu su gradiento efektu.

Sintaksė

background-image: linear-gradient(directioncolor-stop1color-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: