ΠΠΎΠ»Π½ΠΎΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ΅ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡΠ»ΠΎΠΉΠ½ΡΠΌΠΈ CSS-Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΈΠΏΠ°ΠΌΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ² ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ, ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠ΅ΠΆΠΈΠΌΠ°ΠΌΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΏΠΎΠ»ΡΡΠ°ΡΡ Π³ΠΎΡΠΎΠ²ΡΠΉ CSS-ΠΊΠΎΠ΄.
β ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π²ΡΠ΅Ρ ΡΠΈΠΏΠΎΠ² CSS-Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ²:
- Linear Gradient
- Radial Gradient
- Conic Gradient
- Repeating Linear
- Repeating Radial
- Repeating Conic
β ΠΠ½ΠΎΠ³ΠΎΡΠ»ΠΎΠΉΠ½ΡΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ (Stacked Gradients)
- ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅, ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅, ΠΏΠ΅ΡΠ΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ»ΠΎΡΠ²
- ΠΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»ΠΎΡ
- Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ (ΠΏΠ΅ΡΠ΅Π΄Π½ΠΈΠΉ/Π·Π°Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½)
β ΠΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ²:
- Π£Π³Π»Ρ ΠΏΠΎΠ²ΠΎΡΠΎΡΠ° (0-360Β°)
- ΠΠΎΠ·ΠΈΡΠΈΠΈ ΡΠ΅Π½ΡΡΠ° (Π΄Π»Ρ radial ΠΈ conic)
- Π¦Π²Π΅ΡΠΎΠ²ΡΠ΅ ΡΡΠΎΠΏΡ (Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ)
- ΠΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ (opacity)
- Π Π΅ΠΆΠΈΠΌΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ (blend-modes): normal, multiply, overlay, screen, ΠΈ Π΄ΡΡΠ³ΠΈΠ΅
β Live-Preview
- Π Π΅Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π²ΡΡ ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ
- ΠΠΏΡΠΈΠΎΠ½Π°Π»ΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ° Π΄Π»Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
β ΠΠΎΡΠΎΠ²ΡΠΉ CSS-ΠΊΠΎΠ΄
- ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ CSS
- ΠΠ΄Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π² Π±ΡΡΠ΅Ρ ΠΎΠ±ΠΌΠ΅Π½Π°
- Π€ΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π²ΡΠ²ΠΎΠ΄
β ΠΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ (Presets)
- ΠΡΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠΈΡΠ½ΠΈΠ΅
- ΠΠΎΡΠΌΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΡΠΌΠ°Π½Π½ΠΎΡΡΡ
- ΠΠΎΡΠΎΠΊ Π»Π°Π²Ρ
- ΠΠΎΡΠΎΠ»Π΅Π²ΡΠΊΠΈΠΉ ΠΏΡΡΠΏΡΡ
- Π€ΠΈΡΠΊΠ°
- Π―Π΄ΡΠΎ ΡΡΠΌΠ°Π½Π½ΠΎΡΡΠΈ
- ΠΠΊΠ²Π°ΡΠ΅Π»Ρ
- ΠΠΈΡΠ΅Π½Ρ
- Π’Π΅ΠΌΠ½ΡΠΉ ΠΏΠ°ΡΡΠ΅ΡΠ½
- ΠΡΠΌΠ°ΠΆΠ½ΡΠΉ ΡΡΠΌ
- ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΠ²Π½Π°Ρ ΡΠ΅ΠΊΡΡΡΡΠ°
- ΠΡΠ΅Π²Π΄ΠΎ-ΠΆΠΈΠ΄ΠΊΠΈΠΉ ΠΌΠ΅ΡΠ°Π»Π»
- Π€ΡΠ°ΠΊΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Ρ Π½ΠΎ-ΠΏΠ°ΡΡΠ΅ΡΠ½
- ΠΠ±ΡΡΡΠ°ΠΊΡΠ½ΡΠ΅ ΠΏΡΡΠ½Π°
- ΠΠ»Π»ΠΈΠΏΡ ΡΠΎ ΡΠΌΠ΅ΡΡΠ½Π½ΡΠΌ ΡΠ΅Π½ΡΡΠΎΠΌ
- ΠΠ»ΡΠ±ΠΎΠΊΠΈΠΉ ΡΡΠΌΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ