Banco de estilos CSS
Elige una plantilla de botón, tarjeta, insignia o avatar y ajusta sobre ese elemento real el gradiente de fondo, el borde, el radio de las esquinas y las sombras en capas; copia una sola regla CSS completa.
Banco de estilos CSS
Elige una plantilla de botón, tarjeta, insignia o avatar y ajusta sobre ese elemento real el gradiente de fondo, el borde, el radio de las esquinas y las sombras en capas; copia una sola regla CSS completa.
Cómo funciona el banco de estilos
Un elemento real, cuatro propiedades superpuestas
Los generadores de una sola propiedad muestran un cuadrado de color. Aquí la vista previa es un botón, una tarjeta, una insignia o un avatar con texto real, así que un borde de 1px, un radio de 12px y una sombra de dos capas se juzgan juntos tal como se verán en tu interfaz. Desactiva un panel para quitar esa propiedad de la salida sin perder sus ajustes.
La salida es una sola regla
El panel CSS imprime background, border, border-radius y box-shadow en ese orden dentro de un solo selector. Las capas de sombra van una por línea; los colores con opacidad menor a 100% se escriben como rgba() para pegarse correctamente. Cambia el selector .element por el de tu componente.
Preguntas Frecuentes
Preguntas y respuestas frecuentes sobre este tema.
¿Dónde quedaron los generadores de gradiente, sombra y radio?
Son los cuatro paneles de este banco. Las direcciones anteriores siguen funcionando y abren el banco con el panel correspondiente desplegado; nada de lo que podías generar antes desapareció.
¿Por qué el color de la sombra es un valor hex más un control de opacidad?
Normalmente se piensa la sombra como un color base con cierta intensidad. Separarlos permite reutilizar el mismo hex en varias capas y variar solo la opacidad; la salida los combina en rgba() por ti.
¿Se envía algo a un servidor?
No. La vista previa y el CSS se calculan en tu navegador; no hay cuenta, ni subida, ni historial guardado.