Как я могу добиться эффекта градиента с помощью CSS? ⇐ Html

[Anonymous]

Я создал блок в WordPress для отображения формы поиска в определенных частях сайта. Мне нужен выделяющийся дизайн, и я хочу придать контейнеру градиент, подобный показанному на этом изображении:

Я искал информацию, но не нашел похожего градиента; Мне удалось найти только то, что показано в примере. Как я могу добиться градиента, подобного изображенному на изображении, с помощью CSS? Может быть, лучше использовать изображение? Я не уверен, что еще добавить, чтобы объяснить, что мне нужно. Требуется более подробная информация, но я уже объяснил, что мне нужно и чего мне удалось достичь на данный момент.

Код: Выделить всё

:root {
--blue-1: #4e97e6;
--blue-2: #2b5fa8;
--blue-card: #3d7cc9;
--blue-button: #3b78db;
--radius-xl: 32px;
--radius-lg: 20px;
--radius-md: 14px;
}

/* CONTENEDOR EXTERIOR */
#sa-filtro-container {
max-width: 1100px;
margin: 40px auto;
padding: 40px;
border-radius: var(--radius-xl);
background: linear-gradient(180deg, var(--blue-1), var(--blue-2));
box-shadow: 0 30px 60px rgba(0,0,0,.25);
font-family: Arial, sans-serif;

/* DEGRADADO CORRECTO COMO LA CAPTURA */
background:
radial-gradient(
1200px 400px at -200px 100%,
rgba(255,255,255,0.15),
transparent 60%
),
radial-gradient(
800px 300px at 110% -50px,
rgba(255,255,255,0.12),
transparent 60%
),
linear-gradient(
180deg,
#1fa0dc 0%,
#1a79c9 45%,
#195fb0 100%
);

box-shadow: 0 30px 60px rgba(0,0,0,.25);
}

/* TARJETA INTERIOR */
.sa-card {
background: rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
padding: 40px;
/* SOMBRA INTERIOR CORRECTA */
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* TÍTULO */
#sa-filtro-container h3 {
margin: 0 0 15px;
font-size: 40px;
font-weight: 700;
color: #fff;
}

/* DESCRIPCIÓN */
#sa-filtro-container p {
margin: 0 0 35px;
font-size: 20px;
color: rgba(255,255,255,.9);
}

/* FORMULARIO */
.sa-form {
display: flex;
align-items: stretch;
gap: 20px;
}

/* INPUT */
.sa-input {
flex: 1;
height: 64px;
padding: 0 24px;
font-size: 20px;
border-radius: var(--radius-md);
border: none;
outline: none;
color: #555;
}

/* BOTÓN */
.sa-button {
height: 64px;
padding: 0 32px;
background: var(--blue-button);
color: #fff;
border: none;
border-radius: var(--radius-md);
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
line-height: 1.2;
white-space: normal;
}

.sa-button:hover {
background: #336ac5;
}

/* RESULTADO */
#sa-resultado {
margin-top: 45px;
}

#sa-resultado p {
font-size: 38px;
color: rgba(255,255,255,.85);
}

/* RESPONSIVE */
@media (max-width: 768px) {
#sa-filtro-container {
padding: 20px;
}

.sa-card {
padding: 25px;
}

.sa-form {
flex-direction: column;
}

.sa-button {
width: 100%;
}
}

Код: Выделить всё

Encuentra Elementos para transportar

Introduce los elementos que necesitas





BUSCAR ELEMENTOS




Introduce elementos para completar el transporte.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -using-css