CSS
HTML
COMPONENTS
CODE HUB
Generador de Sepia CSS
Configuración
Sepia
Clase
Vista previa
Código
ReadyTools Academy
Kommt baldLerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.
Verfolge deinen Fortschritt, lerne in deinem eigenen Tempo und habe Spaß dabei! 🎯
Generador de Sepia CSS
En CSS, puedes aplicar el efecto de sepia a los elementos utilizando la propiedad filter. El efecto de sepia da a un elemento una apariencia marrón, vintage o anticuada al transformar sus colores en tonos de marrón.
Aquí te mostramos cómo usar el efecto de sepia en CSS:
.sepia-element {
filter: sepia(100%);
}
En este ejemplo:
- La clase .sepia-element aplica el efecto de sepia al elemento que tiene como objetivo.
- sepia(100%) especifica un efecto de sepia del 100%, lo que significa que el elemento aparecerá completamente en tonos de marrón.
Puedes ajustar el valor porcentual para controlar la intensidad del efecto de sepia. Por ejemplo, sepia(50%) resultaría en una apariencia parcialmente sepia, con algunos colores originales preservados.
Aquí tienes otro ejemplo con sepia parcial:
.partial-sepia-element {
filter: sepia(30%);
}
En este caso, la clase .partial-sepia-element aplica un efecto de sepia del 30%, resultando en una transformación parcial a tonos de marrón.
El efecto de sepia se usa a menudo para crear un aspecto vintage o nostálgico para imágenes o elementos, evocando fotografías antiguas. Es una herramienta creativa para lograr estilos visuales específicos y agregar carácter a tus diseños web.
Seleccionar idioma
Establecer tema
© 2025 ReadyTools. Todos los derechos reservados.