Generador de efecto página doblada en CSS
Consigue al instante el CSS de una tarjeta con la esquina doblada
Herramienta para crear ese efecto tridimensional de papel ligeramente enrollado en la esquina de tarjetas o interfaces tipo documento. Elige una de las cuatro esquinas, ajusta el tamaño del doblez, la intensidad de la sombra y los colores de la tarjeta y del reverso: el resultado cambia en la vista previa en tiempo real y puedes copiar el CSS terminado para pegarlo en tu proyecto. Todos los cálculos se hacen solo en el navegador y no se envía ningún dato a un servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Selecciona la esquina que quieras entre las cuatro pestañas de dirección (superior derecha, superior izquierda, inferior derecha e inferior izquierda).
- Ajusta con los deslizadores el tamaño del doblez y la intensidad de la sombra hasta lograr el relieve deseado.
- Define el color de la tarjeta y el del reverso doblado con el selector de color o escribiendo el valor.
- Revisa la vista previa y copia el código terminado con el botón «Copiar CSS» que hay debajo.
Preguntas frecuentes
- ¿Puedo usar el CSS generado tal cual en mi web?
- Sí. Es CSS puro que incluye la clase .curl-card y los estilos del pseudoelemento ::before, así que basta con pegarlo y hacer coincidir el nombre de la clase con tu elemento.
- ¿Puedo aplicar varios dobleces a la vez?
- La herramienta genera el código de una esquina cada vez. Si quieres varias, selecciona cada dirección y combina los CSS resultantes en clases independientes.
- ¿El doblez de papel se consigue solo con CSS, sin imágenes?
- Sí. Un degradado de fondo recorta la esquina en diagonal y el pseudoelemento superpone otro degradado con un filtro drop-shadow, creando el relieve sin usar ninguna imagen.