---
description: Компонент для создания градиентных подложек.
tags: layout
---

<Overview group="utils">

# Gradient [tag:component]

Компонент для создания градиентных подложек. Используется для визуального разделения контента,
создания плавных переходов между элементами или акцента на определённых областях интерфейса.

</Overview>

{/* @example-description: Градиентная подложка поверх контента для визуального акцента. */}
<Playground>
  ```jsx
  <Gradient
    mode="overlay"
    to="top"
    style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}
  />
  <Placeholder
    icon={<Avatar size={56} />}
    title="Алексей Мазелюк"
    action={<Button size="m">Редактировать</Button>}
  >
    Учащийся
  </Placeholder>
  ```
</Playground>

## Доступность (a11y) [#a11y]

Компонент имеет `role="presentation"`, что означает:

- не требует ARIA-атрибутов;
- не должен содержать важный контент;
- не влияет на семантику документа.

```jsx
// ❌ Плохо (градиент содержит текст)
<Gradient>
 <Text>Важная информация</Text>
</Gradient>

// ✅ Хорошо (текст вынесен отдельно)
<div style={{ position: 'relative' }}>
 <Gradient />
 <Text>Важная информация</Text>
</div>
```

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `mode` | `"default" \| "tint" \| "overlay"` | `default` | Тип градиента. |
| `to` | `"top" \| "bottom"` | `top` | Направление градиента. |