# Редактор кривых Безье CSS

> Показывает кривые плавности и экспортирует функции времени.

[Open tool](https://www.toolcabana.com/ru/css-cubic-bezier-editor) · [Дизайн и CSS](https://www.toolcabana.com/ru/category/design-and-css)

Tool ID: css-cubic-bezier-editor. Requested language: ru. Description language: ru. Complete guide translation: yes.

## Overview (en)

CSS cubic Bezier editor builds a cubic-bezier() timing function from two control points and animates a ball with it so you can see the easing. The x values range from 0 to 1, the y values from -3 to 3 for overshoot or anticipation, and the preview duration from 0.1 to 10 seconds. Download the result as a transition-timing-function rule in easing.css.

## Supported tasks (ru)

Показывает кривые плавности и экспортирует функции времени.

## Steps (ru)

1. Введите запрошенные значения в панели настроек.
2. Настройте основные параметры, затем откройте расширенный режим для экспорта и точной настройки. Пользовательские настройки остаются активными при закрытии панели.
3. Запустите «Редактор кривых Безье CSS», просмотрите результат и используйте доступные элементы копирования или скачивания.

## Settings

- Контрольная точка x1 (ru; key: x1; type: number); minimum: 0; maximum: 1
- Контрольная точка y1 (ru; key: y1; type: number); minimum: -3; maximum: 3
- Контрольная точка x2 (ru; key: x2; type: number); minimum: 0; maximum: 1
- Контрольная точка y2 (ru; key: y2; type: number); minimum: -3; maximum: 3
- Длительность предпросмотра (секунды) (ru; key: seconds; type: number); minimum: 0.1; maximum: 10

## Limitations (ru)

Изображения используют существующее ограничение холста в 32 мегапикселя. Поддерживается до 100 исходных изображений, где это предусмотрено. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.

## Privacy and connections (ru)

Эта операция обрабатывает исходные данные в вашем браузере. Копирование и скачивание выполняются только по вашему действию; входные данные не сохраняются в учётной записи или истории.

## Questions (ru)

### Why are the x values limited to 0 to 1 in cubic-bezier?

CSS requires both x coordinates to stay between 0 and 1 so time always moves forward; values outside that range make the function invalid. The y values can go beyond that range, and this editor accepts -3 to 3.

### How do I make a bounce or overshoot easing curve?

Set y2 above 1, for example 1.5, so the motion passes the end point before settling, or set y1 below 0 to pull back before starting. The ball preview loops back and forth so you can judge the effect.

### Does the easing preview respect reduced motion settings?

Yes. When your system requests reduced motion, the preview animation is turned off. The cubic-bezier value is still generated and downloadable; change the setting temporarily if you need to watch the curve in motion.

### Где обрабатываются мои данные?

Эта операция обрабатывает исходные данные в вашем браузере. Копирование и скачивание выполняются только по вашему действию; входные данные не сохраняются в учётной записи или истории.

### Каковы ограничения входных данных?

Изображения используют существующее ограничение холста в 32 мегапикселя. Поддерживается до 100 исходных изображений, где это предусмотрено. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.

## Related tools

- [CSS clamp calculator](https://www.toolcabana.com/ru/css-clamp-calculator)
- [CSS grid layout generator](https://www.toolcabana.com/ru/css-grid-layout-generator)
- [CSS flexbox playground](https://www.toolcabana.com/ru/css-flexbox-playground)
- [CSS clip-path maker](https://www.toolcabana.com/ru/css-clip-path-maker)