T

Text Machine

Potentes herramientas de texto, en tu navegador

Generador de Sombras CSS

Ajusta el desplazamiento, el desenfoque, la expansión, el color y la opacidad con deslizadores en vivo, previsualiza el resultado sobre una superficie clara u oscura y copia un box-shadow CSS limpio, todo en tu navegador.

Vista previa
Sombra

Desplazamiento X

px

Desplazamiento Y

px

Desenfoque

px

Expansión

px

Color

#0a0a0a

Opacidad

%

CSS

box-shadow: 0px 10px 25px 0px rgba(10, 10, 10, 0.2);

Cómo usar Generador de Sombras CSS

  1. 1

    Define el desplazamiento

    Usa los deslizadores de desplazamiento X e Y para mover la sombra a la izquierda, la derecha, arriba o abajo. Un valor de Y positivo deja caer la sombra por debajo del elemento, y uno negativo la eleva por encima.

  2. 2

    Da forma a la sombra

    Aumenta el desenfoque para un borde suave y difuso, o mantenlo bajo para una sombra nítida. La expansión agranda o reduce la sombra antes de aplicar el desenfoque.

  3. 3

    Elige un color y la opacidad

    Haz clic en la muestra para escoger el color de la sombra y luego ajusta la opacidad. Las sombras oscuras, suaves y con poca opacidad son las que lucen más naturales sobre fondos claros.

  4. 4

    Copia el CSS

    Activa Interior (inset) si necesitas una sombra interna, previsualízala sobre una superficie clara u oscura y copia la línea box-shadow en tu hoja de estilos.

Preguntas frecuentes

¿Cómo creo una sombra box-shadow en CSS?
Define el desplazamiento horizontal y vertical, el desenfoque y la expansión con los deslizadores, elige un color y la opacidad, y el CSS de box-shadow se genera justo debajo en tiempo real. Cópialo y pégalo en cualquier elemento.
¿Qué significa cada valor de box-shadow?
Los valores son el desplazamiento horizontal, el desplazamiento vertical, el radio de desenfoque y el radio de expansión, seguidos del color. Los desplazamientos mueven la sombra, el desenfoque suaviza su borde y la expansión cambia cuánto crece la sombra antes de difuminarse.
¿Qué es una sombra inset?
Una sombra inset se dibuja dentro del elemento en lugar de detrás, lo que hace que la superficie parezca hundida o rebajada. Alterna entre Exterior e Interior (inset) para cambiar entre una sombra externa y una interna.
¿Cómo consigo una sombra suave y natural?
Usa un desplazamiento vertical pequeño, un desenfoque generoso, una expansión ligeramente negativa y un color oscuro con poca opacidad, entre el 10 y el 25 por ciento. Las sombras duras y totalmente opacas suelen verse artificiales.
¿Mis datos se suben a un servidor?
No. El generador funciona por completo en tu navegador. No se sube, registra ni almacena nada, así que tu trabajo permanece privado y la herramienta sigue funcionando incluso sin conexión.

Herramientas relacionadas

Sigue trabajando con estas prácticas herramientas

Conversor de HTML a Texto

Formateador de JSON

Probador de Regex

Decodificador de JWT

Generador de Gradientes CSS

Convertidor de Texto a HTML