UUUP Tools

Herramientas de diseño

Generador de cintas CSS — Estilos de insignia en esquina

Genera visualmente CSS de cinta en esquina inclinada para tarjetas. Cambia el texto, los colores, el desplazamiento, el ancho y el tamaño de fuente para insignias de oferta, agotado y estados similares.

Cambio rápido→Generador de box-shadow CSS
CSSInsigniaCinta
Cambio rápido:Generador de box-shadow CSSClip Path CSSGenerador de degradados CSS

Añadir esta herramienta a favoritos

No se ha seleccionado un modo de almacenamiento de favoritos.

Acciones rápidas

Volver a Herramientas de diseño Explorar todas las herramientas

Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.

Casos de uso

  • Añade una cinta promocional a la esquina de una tarjeta de producto
  • Marca estados de agotado o novedad
  • Ajusta el desplazamiento para que la insignia no cubra la imagen principal

Cómo usar

  1. Introduce el texto de la cinta y elige una esquina
  2. Ajusta el color, el desplazamiento, el ancho y el tamaño de fuente
  3. Confirma los ajustes de overflow del contenedor padre y copia el CSS

Entrada y salida de ejemplo

Configuración

Texto OFERTA, posición arriba-derecha, fondo rojo / texto blanco

CSS

.ribbon { position: absolute; transform: rotate(45deg); ... }

FAQ

¿Por qué las esquinas de la cinta aparecen recortadas?

Las cintas inclinadas a menudo desbordan la caja. El contenedor padre necesita position: relative, y overflow: hidden depende del interruptor de vista previa.

¿Puedo personalizar los selectores?

Sí. Los selectores de tarjeta y cinta son editables; el fragmento generado usa los selectores que introduzcas.

Herramientas

Herramientas relacionadas

Continúa con otra herramienta traducida para una tarea cercana.

Generador de box-shadow CSS

Generador de box-shadow CSS — Controles visuales

Disponible

Ajusta visualmente el desplazamiento, el desenfoque, la propagación, el color, la opacidad y el inset. Previsualiza en vivo y genera el CSS de box-shadow para tarjetas, botones y superposiciones.

CSS Sombra box-shadow
Abrir herramienta

Clip Path CSS

Clip Path CSS — Generador de formas

Disponible

Genera formas CSS clip-path a partir de ajustes predefinidos y controles sencillos con una vista previa en vivo: útil para tarjetas en ángulo, insignias, recortes de imagen y maquetaciones decorativas.

CSS clip-path Forma
Abrir herramienta

Generador de degradados CSS

Generador de degradados CSS — Lineal, radial, cónico

Disponible

Crea visualmente degradados CSS lineales, radiales y cónicos. Ajusta el ángulo y las posiciones de parada, añade varias paradas y copia el CSS para fondos, botones y transiciones de marca.

CSS Degradado Fondo
Abrir herramienta