Créalos visualmente y obtén el CSS listo para copiar
Generador de degradados y sombras: los creas visualmente con controles deslizantes, ves el resultado en tiempo real y copias el CSS listo para usar. En el degradado eliges dos colores y un ángulo entre 0 y 360 grados, y el código resultante es linear-gradient. En la sombra ajustas la distancia hacia abajo, el desenfoque, la propagación, la intensidad, el color y el redondeo de esquinas, y lo ves en una tarjeta de ejemplo. Cuatro ajustes predefinidos, sutil, normal, marcado y flotante, ofrecen un buen punto de partida, y al copiar la sombra también se incluye el border-radius. Es útil para botones, tarjetas y la sección de inicio, y también cuando necesitas explicar a una herramienta de IA exactamente qué aspecto quieres.
En el fondo de la sección de inicio, en botones importantes o en una tarjeta destacada. No en todo el sitio web, porque cansa la vista.
Probablemente la intensidad sea demasiado alta. Una buena sombra es aquella que casi no se nota: prueba con una intensidad del 10 al 20 por ciento, o uno de los ajustes predefinidos.
No en esta herramienta, hay un color de inicio y un color de fin. Puedes añadir un color intermedio manualmente en el código, entre los dos colores dentro de linear-gradient.
El desplazamiento horizontal está fijado en 0, por lo que la sombra cae directamente hacia abajo como si fuera iluminación superior. Es el aspecto habitual en las interfaces.
La propagación negativa reduce la sombra antes del desenfoque, de modo que asoma por debajo de la tarjeta y no por todos los lados. Tres de los cuatro ajustes predefinidos la utilizan.
Klix no se ha podido cargar
Prueba primero a recargar la página. Si acaba de salir una versión nueva, recargar lo soluciona al instante.
Si recargar no ha servido, puede que tu navegador sea demasiado antiguo. Klix ejecuta las herramientas en tu propio dispositivo y no en un servidor, así que necesita un navegador de 2022 o posterior. Qué hacer: actualiza Chrome o Firefox y vuelve a abrir klixtools.com.