Generador de Gradiente CSS definitivo

Preajustes

Nombre:

tono/saturación invertir importar css importar imagen

Puntos de parada

Opacidad:		Ubicación:	%
Color:		Ubicación:	%

Patrocinador

Vista previa

Orientación: Tamaño: x IE

CSS

cambiar a sass

background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */

copiar

Formato de color: Comentarios

Enlace para guardar o compartir el gradiente actual usando su enlace permanente.

Compatibilidad del navegador

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Navegador Android	Chrome para Android
6 - 8 Soporte parcial usando la sintaxis filter Uso del navegador: 0.03%			4 - 9 Soporte usando la antigua sintaxis -webkit- Uso del navegador: 0% Selecciona "Maximizar compatibilidad" para soportar	4 - 5 Soporte usando la antigua sintaxis -webkit- Uso del navegador: 0.01% Selecciona "Maximizar compatibilidad" para soportar		3.2 - 4.3 Soporte usando la antigua sintaxis -webkit- Uso del navegador: 0% Selecciona "Maximizar compatibilidad" para soportar	2.1 - 3 Soporte usando la antigua sintaxis -webkit- Uso del navegador: 0.01% Selecciona "Maximizar compatibilidad" para soportar
9 Soporte parcial usando la sintaxis filter Soporte completo usando SVG (selecciona "soporte IE9") Uso del navegador: 0.05% Selecciona "Maximizar compatibilidad" para soportar		3.6 - 15 Soporte usando el prefijo -moz- Uso del navegador: 0.01% Selecciona "Maximizar compatibilidad" para soportar	10 - 25 Soporte usando el prefijo -webkit- Uso del navegador: 0% Selecciona "Maximizar compatibilidad" para soportar	5.1 - 6 Soporte usando el prefijo -webkit- Uso del navegador: 0.01% Selecciona "Maximizar compatibilidad" para soportar	11.1 - 11.5 Soporte usando el prefijo -o- Uso del navegador: 0% Selecciona "Maximizar compatibilidad" para soportar	5.1 - 6.1 Soporte usando el prefijo -webkit- Uso del navegador: 0% Selecciona "Maximizar compatibilidad" para soportar	4 - 4.3 Soporte usando el prefijo -webkit- Uso del navegador: 0.09% Selecciona "Maximizar compatibilidad" para soportar
10+ Soporte completo (sin prefijo)	12+ Soporte completo (sin prefijo)	16+ Soporte completo (sin prefijo)	26+ Soporte completo (sin prefijo)	6.1+ Soporte completo (sin prefijo)	12+ Soporte completo (sin prefijo)	7.1+ Soporte completo (sin prefijo)	4.4+ Soporte completo (sin prefijo)	46+ Soporte completo (sin prefijo)

soporte IE9 (?) Maximizar compatibilidad

Enlaces a la documentación de gradientes CSS: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].

Qué hay de nuevo

» No generar ninguna sintaxis con prefijo por defecto (volver a activar usando el modo 'Maximizar compatibilidad')

mostrar más... mostrar menos...

Versiones anteriores (English)

» Don't generate older Opera, IE10 Preview, Webkit syntax by default (turn back on using "Maximize compatibility" mode)
» Browser Compatibility panel showing supported browser versions, usage stats etc.
» Support for radial and diagonal linear gradients
» Support for full multi-stop gradients in Internet Explorer 9 (IE9) using SVG
» Support for Sass SCSS format using Compass mixins (needs latest beta of Compass)
» Copy to clipboard button for quickly grabbing the generated code
» Easy resizing of preview panel by dragging its corner
» Opacity support
- · Create transparent css gradients, or add fade-in, fade-out, semi-transparency and similar effects
- · Add any number of opacity stops to your gradient
- · Supports opacity stops at any position - completely independent of color stops
- · Automatically switch to rgba/hsla color output mode when transparency is used
- · Outputs older Internet Explorer opacity format (yes, this will even work with IE6!)
- · Opacity support when importing from CSS
- · Supports importing gradients with transparency from an image
» Double click on CSS text output to select all of it for easy copying
» More robust new algorithm for converting gradient images to CSS, including alpha support

» New 'Adjustments' panel - tweak your gradient or create new flavors
- · Adjust hue, saturation and lightness
- · Reverse current gradient
» Added hsl and hsla color format support in CSS output
» Added a unique permalink to each gradient for linking to, saving or sharing specific gradients.
» Added the ability to toggle CSS comments on/off.

» Added support for 4 new gradient formats:
- · IE 10+
- · Newer Webkit
- · Opera 11.10+
- · W3C

» Import from an image - convert an existing gradient image to CSS
- · Supports complex multi-stop gradients
- · Upload an image or import from an image URL

» Import from CSS - enter existing gradient CSS in various formats and import it into the tool
» Save your gradients as new presets
- · Edit your gradient, enter its name and hit 'new'
- · Remove any of your preset gradients using its context menu (right click)
- · Your gradient presets will be persisted in the tool across sessions
» Added rgb and rgba color format support in CSS output
» Persist settings across sessions - gradient orientation, preview panel dimensions, output color format etc.
» Keyboard shortcuts - press up/down in color stop entry box to increase/decrease value

Acerca de

El Editor de Gradientes CSS definitivo fue creado por Alex Sirota. Si te gusta esta herramienta, echa un vistazo a ColorZilla para herramientas más avanzadas como cuentagotas, selectores de color, editores de paleta y analizadores de sitios web.

Como quizás sepas, HTML5 introdujo muchas características emocionantes para los desarrolladores web. Una de las características es la capacidad de especificar gradientes usando solo CSS3, sin tener que crear ninguna imagen y usarla como fondos repetitivos para efectos de gradiente.

Importante: Necesitarás una versión reciente de Firefox, Chrome, Safari, Opera o IE para usar este Generador de Gradientes. Los gradientes CSS resultantes son compatibles con varios navegadores: funcionarán en estos navegadores y también se revertirán a un gradiente más simple en versiones antiguas de Internet Explorer.

Características

Interfaz potente similar a Photoshop
Salida CSS compatible con varios navegadores
Gradientes horizontales, verticales, diagonales y radiales
Gradientes complejos de múltiples paradas
Soporte de opacidad con múltiples paradas de opacidad
Formatos de color Hex, rgb, rgba, hsl, hsla
Soporte para gradientes de múltiples paradas completas con IE9
Importar desde imagen (convertir gradiente de imagen a CSS)
Importar desde CSS existente
Ajustar gradiente por tono, saturación, luminosidad
Más de 135 preajustes de gradiente
Guardando preajustes de gradiente personalizados
Salida Sass
Panel de vista previa flexible
Enlaces permanentes de gradiente para enviar y compartir
¡Más en breve!

Ayuda

El control principal de gradiente te permite:

» Ajustar la posición de la parada del gradiente arrastrando el marcador de parada
» Ajustar el color de la parada haciendo doble clic en el marcador de parada
» Eliminar un punto de parada arrastrando el marcador de parada hacia arriba o hacia abajo
» Agregar una nueva parada haciendo clic en cualquier lugar entre los marcadores de parada existentes

Puedes usar el panel 'Puntos de parada' para controlar el color y la posición del punto de parada seleccionado actualmente con más precisión.

El panel 'Vista previa' permite previsualizar el gradiente actual como uno vertical u horizontal, y también permite previsualizar rápidamente cómo se verá el gradiente de fallback de Internet Explorer en IE.

Finalmente, el panel 'CSS' siempre tiene el CSS para el gradiente actual para copiar y pegar fácilmente en tu hoja de estilos. También puedes usar este panel para importar un CSS de gradiente existente a la herramienta.