Cómo usar degradados CSS para fondos en Shopify y GemPages

¿Qué es un degradado CSS?

A Degradado CSS Es un estilo de fondo que cambia entre dos o más colores. A diferencia de las imágenes tradicionales, los degradados se crean con código, lo que los hace escalables, ligeros y fácilmente personalizables.

Hay tres tipos principales de degradados CSS:

• gradientes lineales:Transición de colores a lo largo de una línea recta (por ejemplo, de arriba a abajo o de izquierda a derecha).
  Ejemplo: gradiente lineal (rojo, verde)
• gradientes radiales:Los colores irradian hacia afuera desde un punto central.
  Ejemplo: gradiente radial (círculo, azul, blanco)
• gradientes cónicos:Los colores giran alrededor de un punto central como en un gráfico circular.
  Ejemplo: gradiente cónico (desde 90 grados, rojo, amarillo, verde)

Generadores de degradado CSS recomendados

Estas herramientas gratuitas lo hacen más fácil:

• Degradado CSS – Interfaz fácil de usar para gradientes lineales y radiales
• uiGradientes– Hermosos ajustes preestablecidos listos para usar
• Generador de gradientes de Coolors – Ideal para paletas de marca
• Caza de gradientes – Gradientes seleccionados por la comunidad

Estos generadores ofrecen vistas previas visuales y le permiten copiar el CSS con un solo clic.

Cómo configurar un fondo degradado en Shopify

Los temas de Shopify ahora te permiten agregar degradados directamente desde el Temas de ShopifyAquí te explicamos cómo hacerlo usando CSS personalizado:

Paso 1: Ve a Tienda Online > Temas en tu panel de control de Shopify.

Paso 2: Haga clic en Personalizar junto al tema que desea editar.

Paso 3: Haga clic en el botón Configuración (icono de engranaje) y luego elige Color.

Paso 4: En Esquemas, haga clic en el esquema que desea editar.

Paso 5: Seleccione el degradado que desea modificar.

Paso 6: Haga clic en la flecha al lado de Gradiente, A continuación, seleccione CSS.

Paso 7: Pegue el código CSS de degradado en el campo de entrada. 

Paso 8: Haga clic en Guardar.

Verás el resultado en la vista previa del editor de temas. Este método funciona bien para encabezados, banners e incluso secciones completas..

Cómo añadir un fondo degradado CSS en GemPages

GemPages ofrece compatibilidad nativa con la personalización del fondo, incluyendo colores estáticos, degradados e imágenes. Pero si desea más control, utilice CSS, así es cómo:

Paso 1: clic derecho en la sección donde desea aplicar un degradado.

Paso 2: Seleccione Código Personalizado desde el menú contextual.

Paso 3: En la ventana emergente de CSS, introduce tu código CSS personalizado. Ejemplo:

.gdXweR3hSd {

  fondo: gradiente lineal (135 grados, #f6d365, #fda085) !importante;

}

Explicación:

.gdXweR3hSd

• Esto es una Selector de clases CSS.
• Se dirige a cualquier elemento de su página que tenga el nombre de clase .gdXweR3hSd

fondo: gradiente lineal (135 grados, #f6d365, #fda085);

• Esta línea aplica una fondo degradado a la sección seleccionada.

Vamos a desglosarlo con más detalle:

• del Proyecto: es la propiedad CSS utilizada para establecer el fondo de un elemento.
• gradiente lineal(…) es una función que crea una transición suave entre colores.
• 135deg:Esto significa que el gradiente fluirá en diagonal, desde el esquina superior izquierda a la esquina inferior derecha.
  • Puedes cambiar este valor a otros ángulos como 90deg (de izquierda a derecha), 180deg (de arriba a abajo), etc.
    
• #f6d365: Este es el color de inicio del gradiente.
• #fda085: Este es el color final del gradiente.

Paso 4: Haga clic en Guardar.