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;Learn to Code with Lara
Master programming concepts step-by-step with your interactive AI tutor. Lara explains complex logic, reviews your practice exercises, and helps you build a solid foundation in software development.
Interactive coding lessons tailored to your own pace.
Start learning with LaraGenerador 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.