CSS
HTML
COMPONENTS
CODE HUB
Generador de Sombra CSS
Configuración
Color
Desplazamiento Horizontal
Desplazamiento Vertical
Blur
Clase
Vista previa
Código
border: 1px solid #000000;ReadyTools Academy
Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.
Verfolge deinen Fortschritt, lerne in deinem eigenen Tempo und habe Spaß dabei! 🎯
ComenzarGenerador de Sombra CSS
En CSS, puedes crear un efecto de sombra utilizando la propiedad box-shadow. Una sombra de caja es un efecto visual que agrega una sombra detrás de un elemento, dándole una sensación de profundidad y separación del fondo. Puedes usar la propiedad box-shadow para controlar la posición, el tamaño y la apariencia de la sombra de caja.
Aquí te mostramos cómo crear un efecto de sombra de caja básico en CSS:
.shadow-element {
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}
En este ejemplo:
- La clase .shadow-element aplica un efecto de sombra al elemento que tiene como objetivo.
- 4px y 4px especifican el desplazamiento horizontal y vertical de la sombra, respectivamente. Puedes ajustar estos valores para controlar la posición de la sombra.
- El valor de 8px define el radio de desenfoque de la sombra, lo que determina qué tan borrosa o nítida aparece la sombra. Un valor más grande crea una sombra más difusa.
- El rgba(0, 0, 0, 0.2) establece el color y la opacidad de la sombra. En este caso, es una sombra negra semitransparente. Si no sabes qué color elegir, usa el Selector de Color ReadyTools.
Puedes personalizar la propiedad box-shadow para crear diferentes efectos de sombra ajustando los valores de desplazamiento, radio de desenfoque y color. Por ejemplo, puedes crear sombras internas (sombras dentro del elemento) o múltiples sombras para un efecto visual más complejo.
Aquí tienes un ejemplo de una sombra interna:
.inset-shadow-element {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
En CSS, puedes crear un efecto de sombra utilizando la propiedad box-shadow. Una sombra de caja es un efecto visual que agrega una sombra detrás de un elemento, dándole una sensación de profundidad y separación del fondo. Puedes usar la propiedad box-shadow para controlar la posición, el tamaño y la apariencia de la sombra de caja.
En CSS, puedes crear un efecto de sombra utilizando la propiedad box-shadow. Una sombra de caja es un efecto visual que agrega una sombra detrás de un elemento, dándole una sensación de profundidad y separación del fondo. Puedes usar la propiedad box-shadow para controlar la posición, el tamaño y la apariencia de la sombra de caja.