Generador de degradados CSS
Elija los colores y un ángulo, mire la vista previa y copie el CSS del fondo.
CSS
Crear un degradado CSS online
Los fondos degradados se usan en secciones de cabecera, botones, tarjetas y capas sobre fotos. Esta página abre el Generador CSS en su pestaña de degradado, para que pruebe ángulos y colores a ojo y copie la línea exacta de CSS.
Ejemplos
| CSS | Resultado |
|---|---|
linear-gradient(90deg, #6c5ce7 0%, #00b894 100%) | De morado a la izquierda a verde a la derecha |
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) | Oscurecimiento en la parte inferior, para que el texto se lea bien sobre una foto |
radial-gradient(circle, #ffffff 0%, #dfe6e9 100%) | Un punto de luz suave en el centro |
conic-gradient(from 0deg, #e17055 0% 25%, #0984e3 25% 100%) | Un gráfico circular con un cuarto marcado |
Consejos
Los colores cercanos en la rueda de color se mezclan con suavidad; los opuestos tienden a volverse grises en el centro, algo que se corrige con un color intermedio. Tenga en cuenta el contraste del texto: compruebe la parte más clara y la más oscura del degradado frente al color del texto.
Herramientas relacionadas
Para las sombras del mismo elemento, vea el generador de box-shadow. Para convertir un color a HEX, RGB o HSL, use el conversor de colores.