Generador de CSS
Degradados, sombras y esquinas, ajustados a ojo
Opciones
Resultado
background: linear-gradient(135deg, #1fa89c 0%, #7c3aed 100%);
Pega la declaración copiada directamente dentro de tu selector CSS.
La sintaxis de las sombras y los degradados tiene cuatro o cinco números cuyo efecto nadie puede imaginar leyendo el código. Arrastra los deslizadores hasta que la vista previa te guste y llévate la regla.
Cómo se usa
- 1 Elige qué quieres construir.
- 2 Ajusta los deslizadores y los colores mientras miras la vista previa.
- 3 Copia el CSS generado.
- 4 Pégalo dentro de tu selector.
Preguntas frecuentes
¿Qué significan los valores de box-shadow?
Desplazamiento horizontal, desplazamiento vertical, desenfoque, expansión y color. El desenfoque suaviza el borde; la expansión agranda o encoge toda la sombra antes de desenfocarla. Un desplazamiento vertical positivo con poco desenfoque se lee como una luz situada arriba.
¿Cómo consigo que una sombra parezca natural?
Mantén el desplazamiento horizontal cerca de cero, usa un desplazamiento vertical positivo pequeño y un desenfoque de dos o tres veces ese valor. Usa negro con poca opacidad en lugar de gris: las sombras grises se ven planas sobre fondos de color.
¿Qué hace inset?
Dibuja la sombra dentro del elemento en vez de fuera, lo que hace que parezca hundido en lugar de elevado. Va bien en campos de formulario y en botones activados.