Generador de gradientes CSS
Elige colores y ángulos para generar código de gradiente CSS mientras ves una vista previa
Características
Vista previa y código se actualizan simultáneamente
Cambios en color y ángulo se reflejan al instante en la apariencia y el CSS
Compatible con gradientes lineales, radiales y cónicos
Especifica en detalle el ángulo, forma y posición central según el tipo
Ajusta hasta 10 colores arrastrando
Arrastra los puntos en la barra para cambiar posiciones y usa controles deslizantes para la transparencia
8 muestras predefinidas y generación aleatoria
Comienza con combinaciones clásicas o aleatorias y luego haz ajustes
Cómo usar
Elige el tipo
Selecciona entre gradiente lineal, radial o cónico
Define los colores
Elige colores por código o muestras, agrega más colores y ajusta posición y transparencia
Ajusta la dirección
Para lineales, especifica ángulo o usa botones direccionales; para radiales y cónicos, define la posición central
Copia el código
Usa el botón Copiar para pegar el CSS de una línea en tu hoja de estilos
Casos de uso
Crear fondos para imágenes hero
Define los colores de fondo del encabezado o botones del sitio sin escribir código
Elegir colores para títulos de blog
Selecciona una combinación similar a las muestras para los fondos de títulos de artículos
Crear superposiciones sobre fotografías
Crea una capa semitransparente disminuyendo la opacidad para colocar sobre fotos
Ajustar gradientes multicolor
Arrastra los puntos de transición entre 3 o más colores para afinarlos
Conceptos básicos
Diferencias entre linear, radial y conic
CSS ofrece 3 funciones de gradiente con cambios de color distintos, todas se escriben en la propiedad background.
- linear-gradient：linear-gradient crea un gradiente lineal donde el color cambia a lo largo de una línea recta en el ángulo especificado.
- radial-gradient：radial-gradient crea un gradiente radial donde el color se expande desde el centro hacia afuera en forma de círculo o elipse.
- conic-gradient：conic-gradient crea un gradiente cónico donde el color cambia girando alrededor del centro en el sentido de las agujas del reloj.
Correspondencia entre ángulos y palabras clave de dirección
El ángulo en linear-gradient comienza en 0deg apuntando hacia arriba y aumenta girando en el sentido de las agujas del reloj. Los ángulos también pueden escribirse como palabras clave de dirección como 'to right', donde 90deg equivale a 'to right' y 180deg a 'to bottom'.
Cómo escribir puntos de color y transparencia
Los puntos de color (color stops) indican dónde toma cada color en el gradiente, con 0% al inicio y 100% al final. Por ejemplo, '#3B82F6 0%, #8B5CF6 100%' define un cambio de azul a púrpura.
- Formato #RRGGBB：El formato #RRGGBB expresa el color usando valores hexadecimales de dos dígitos para rojo, verde y azul, donde #FF0000 es rojo opaco.
- Formato rgba：El formato rgba suma transparencia (0-1) a los valores RGB (0-255), donde 0.5 representa una color 50% transparente.
Seguridad y privacidad
Procesamiento en el navegador
Los datos introducidos se procesan únicamente dentro de su navegador y no se envían al exterior.
Procesamiento solo en el navegador
Generación de código de gradiente se procesa completamente en su navegador y los datos de entrada no se envían a ningún servidor.
Comunicación cifrada con HTTPS
La carga de la página también se cifra con TLS y terceros no pueden leer su contenido.
Sin envío a terceros
Los datos de entrada no se envían a servicios externos como redes publicitarias o rastreadores.
Sin guardado automático de resultados
Colores y configuración seleccionados y sugerencias de entrada no se almacenan en el servidor.
Sigue RAKKOTOOLS en Google Search
¡185 herramientas prácticas serán más fáciles de encontrar desde Google Search y búsqueda con IA!
- Se encuentra en búsqueda
- También visible en búsqueda con IA
- Descubre nuevas herramientas
Novedades
- update #312
Se añadió generador de degradado CSS, generando código seleccionando color y ángulo