Коротко — два варианта:
- если нужно ТАК ЖЕ (точно тот же SVG), самый простой способ — вставить сам SVG как background (data:URL) или как <svg> в разметку и позиционировать его поверх/в фоне через CSS;
- если нужно «перерисовать» фон с помощью чистого CSS, то обычно достаточно перевести SVG-градиенты в linear-gradient/radial-gradient или повторяющийся градиент (repeating-linear-gradient) и, при необходимости, применить clip-path / mask для формы.
Ниже — несколько практических примеров и приёмов. Если пришлёте полный SVG (или ссылку на код/скрин), я быстро подготовлю точный CSS.
1) Простой градиент (SVG linearGradient → CSS)
Если в SVG был линейный градиент, то в CSS это часто делается так:
.example1 {
width: 369px;
height: 76px;
border-radius: 8px; /* если были скругления */
background: linear-gradient(90deg, #6dd5ed 0%, #2193b0 100%);
}
Поменяйте угол (deg) и цвета/остановки согласно вашему SVG.
2) Паттерн/полосы (repeating-linear-gradient)
Если в SVG были полосы/узор — используйте repeating-linear-gradient:
.example2 {
width: 369px;
height: 76px;
background:
repeating-linear-gradient(45deg,
rgba(255,255,255,0.12) 0 12px,
rgba(0,0,0,0) 12px 24px),
linear-gradient(90deg,#6dd5ed 0%,#2193b0 100%); /* фон под полосами */
}
3) Точная копия SVG в фоне (data URI) — «чистый CSS», точный результат
Если надо получить абсолютно тот же вид (включая сложные градиенты, маски и пр.), можно закодировать SVG как data:image/svg+xml и поставить его в background-image. Это остаётся «только CSS», но использует сам SVG как картинку:
/* пример: вставляем маленький SVG как фон */
.box {
width: 369px;
height: 76px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 369 76'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%236dd5ed'/><stop offset='1' stop-color='%232193b0'/></linearGradient></defs><rect width='100%' height='100%' fill='url(%23g)' rx='8'/></svg>");
background-size: cover;
background-repeat: no-repeat;
}
Важно: в data-URI символы вроде # нужно экранировать как %23, пробелы/кавычки — правильно кодируйте или используйте encodeURIComponent.
4) Форма не‑прямоугольная — clip-path или mask
Если SVG задавал необычную форму (вырез, скосы и т.д.), для одинаковой формы в CSS можно использовать:
- clip-path: path("M ... Z") — поддержка в современных браузерах;
- -webkit-mask-image / mask-image с SVG-градиентом/маской;
- комбинировать градиенты и border-radius для простых форм.
Пример clip-path (треугольный вырез сверху справа):
.box {
background: linear-gradient(90deg,#6dd5ed,#2193b0);
clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
}
Поддержка clip-path: path() есть в современных Chrome/Edge/Firefox (частично); для Safari может потребоваться префикс.
5) Замечания по совместимости
- data:image/svg+xml как фон даёт идеальную копию, но учтите кросс-доменные ограничения и необходимость URL-энкодинга.
- clip-path и CSS-маски поддерживаются не во всех старых браузерах.
- Если SVG использовал filter или сложные паттерны — их можно не всегда воспроизвести чистым CSS без ухищрений.
Если прикрепите полный SVG (или вставите HTML/CSS из вашего jsbin), я:
- дам конкретный CSS-эквивалент градиентов/паттернов,
- или подготовлю корректную data-URI-версию для background-image,
- и покажу clip-path/mask, если форма нестандартная.