Herramientas de diseño y CSS
Crea degradados, sombras y efectos con CSS listo para copiar.
Los efectos CSS son mucho más fáciles de diseñar a ojo que de escribir de memoria. Nadie recuerda la sintaxis exacta de un degradado cónico de varias paradas, de una sombra en capas que se lea como profundidad suave o de una curva cubic-bezier que se sienta natural en lugar de mecánica. Estos generadores te dan controles visuales y producen el CSS correspondiente en vivo, así que ajustas hasta que se ve bien y luego copias la regla directamente a tu hoja de estilos.
Herramientas de esta categoría
23Sobre estas herramientas
Degradados, sombras y profundidad en capas
La profundidad convincente casi nunca viene de una sola sombra. Las interfaces reales apilan una sombra cercana, oscura y ajustada para el contacto con otra más ancha, suave y clara para la caída ambiental, y CSS permite varias sombras separadas por comas exactamente para eso. Los degradados funcionan igual: añadir paradas de color intermedias es lo que elimina el gris turbio que aparece cuando el navegador interpola entre dos tonos lejanos.
Formatos de color y contraste
HEX es compacto, RGB es explícito, HSL permite construir una paleta moviendo un solo número y el moderno OKLCH mantiene estable la luminosidad percibida entre tonos, de modo que un conjunto de colores parezca de verdad un conjunto. Convertir entre ellos es rutina; comprobar el contraste no es opcional, porque un texto por debajo de la ratio WCAG resulta ilegible para mucha gente y lo marca cualquier auditoría de accesibilidad.
Movimiento que no parece barato
Una transición lineal parece mecánica porque nada físico se mueve a velocidad constante. Las curvas de aceleración lo arreglan, y la diferencia entre una buena transición y una irritante suele estar en la duración más que en la curva: 150-250 ms para cambios de estado pequeños y algo más para desplazamientos grandes. Ver la curva animándose junto al código es lo que hace rápido ese juicio.