Generador CSS
Diseña degradados, sombras de caja y esquinas redondeadas de forma visual y copia el CSS que necesitan.
Generador CSS - degradados, sombras de caja y esquinas redondeadas
Diseñe a ojo, y no a base de prueba y error, tres de los efectos CSS más usados: degradados, sombras de caja y radio de borde. Mueva un control o elija un color y la caja de vista previa cambia al momento; el CSS que aparece debajo es siempre exactamente lo que muestra la vista previa, listo para pegarlo en una hoja de estilos.
El resultado usa las propiedades estándar background, box-shadow y border-radius, que todos los navegadores actuales admiten sin prefijos de proveedor. No se envía nada a ninguna parte: la herramienta se ejecuta en su navegador.
Cómo se usa
- Elija Degradado, Sombra de caja o Radio de borde.
- Mueva los controles, escriba números exactos en las casillas de al lado o elija colores.
- Pulse Aleatorio para tener un punto de partida, o Restablecer para volver a los valores por defecto.
- Copie el CSS que aparece bajo la vista previa.
Degradados
Un degradado es una imagen que dibuja el navegador, así que va en background (o background-image) y se adapta a cualquier tamaño sin perder nitidez. Hay tres tipos:
| Tipo | Ejemplo | Aspecto |
|---|---|---|
| Lineal | linear-gradient(135deg, #6c5ce7 0%, #00b894 100%) | Los colores cambian a lo largo de una línea recta con el ángulo que elija |
| Radial | radial-gradient(circle, #6c5ce7 0%, #00b894 100%) | Los colores se expanden desde el centro en anillos |
| Cónico | conic-gradient(from 135deg, #6c5ce7 0%, #00b894 100%) | Los colores giran alrededor del centro, como una rueda de color |
Cada color tiene una posición en porcentaje. Dos colores en la misma posición dan un corte nítido en lugar de una transición, y así se hacen rayas y gráficos circulares solo con CSS. Use Añadir color para llegar hasta seis paradas, repartidas de forma uniforme; Quitar color elimina la última, hasta un mínimo de dos.
En CSS, los ángulos empiezan arriba y giran en el sentido de las agujas del reloj: 0deg va hacia arriba, 90deg hacia la derecha y 180deg hacia abajo.
Sombras de caja
Una sombra de caja admite hasta cinco valores: desplazamiento horizontal, desplazamiento vertical, desenfoque, extensión y color, además de la palabra clave opcional inset.
- Horizontal y Vertical desplazan la sombra; los valores negativos la mueven a la izquierda o hacia arriba.
- Desenfoque suaviza el borde. Con 0 la sombra es nítida, como un recorte.
- Extensión agranda la sombra antes de desenfocarla. Una extensión negativa con un desenfoque grande da ese aspecto suave y elevado tan habitual en las interfaces modernas.
- Opacidad va incluida en el color como
rgba(), de modo que la sombra nunca tapa lo que hay detrás. - Sombra interior (inset) la dibuja dentro de la caja, que así parece hundida.
Las sombras sutiles suelen quedar mejor que las fuertes: un color oscuro y algo transparente tomado de su paleta, en lugar de negro puro, se integra de forma más natural.
Radio de borde
Con Mismo valor en todas las esquinas marcado, un solo control redondea las cuatro esquinas. Desmárquelo para ajustar cada esquina por separado; el CSS muestra entonces cuatro valores en el orden superior izquierda, superior derecha, inferior derecha e inferior izquierda.
En píxeles, el redondeo es el mismo a cualquier tamaño. En porcentaje sigue a la caja: border-radius: 50% convierte un cuadrado en un círculo y un rectángulo en una elipse.
Herramientas relacionadas
Para convertir un color entre HEX, RGB y HSL, o encontrar uno con suficiente contraste con su fondo, use el conversor de colores. Para ordenar o minificar la hoja de estilos en la que pega el CSS, use el formateador de código. Las páginas de tareas abren esta herramienta en un solo efecto: generador de degradados CSS, generador de box-shadow y generador de border-radius.