Generador de Gradiente CSS Definitivo

Preestablecidos

Nombre:

tono/saturación invertir importar css importar imagen

Puntos

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, guarda o comparte el gradiente actual usando su enlace permanente.

Compatibilidad de navegador

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Navegador Android	Chrome para Android
6 - 8 Soporte parcial usando 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 sintaxis filter Soporte completo usando SVG (selecciona "soporte IE9") Uso del navegador: 0.05% Selecciona "Maximizar compatibilidad" para soportar		3.6 - 15 Soporte usando prefijo -moz- Uso del navegador: 0.01% Selecciona "Maximizar compatibilidad" para soportar	10 - 25 Soporte usando prefijo -webkit- Uso del navegador: 0% Selecciona "Maximizar compatibilidad" para soportar	5.1 - 6 Soporte usando prefijo -webkit- Uso del navegador: 0.01% Selecciona "Maximizar compatibilidad" para soportar	11.1 - 11.5 Soporte usando prefijo -o- Uso del navegador: 0% Selecciona "Maximizar compatibilidad" para soportar	5.1 - 6.1 Soporte usando prefijo -webkit- Uso del navegador: 0% Selecciona "Maximizar compatibilidad" para soportar	4 - 4.3 Soporte usando 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].

Novedades

» No generar ninguna sintaxis con prefijo por defecto (reactivar 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 Gradiente 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 colores, editores de paletas 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 imágenes y usarlas como fondos repetidos 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 cross-browser - funcionarán en estos navegadores y también ofrecerán un gradiente más sencillo en versiones antiguas de Internet Explorer.

Características

Interfaz potente al estilo Photoshop
Salida CSS compatible con diferentes navegadores
Gradientes horizontales, verticales, diagonales y radiales
Gradientes complejos con múltiples paradas
Soporte de opacidad con múltiples paradas de opacidad
Formatos de color Hex, rgb, rgba, hsl, hsla
Soporte para gradientes con 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
Guardar preajustes de gradiente personalizados
Salida Sass
Panel de vista previa flexible
Enlaces permanentes de gradiente para enviar y compartir
¡Más pronto!

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 una parada arrastrando el marcador de parada hacia arriba o hacia abajo
» Añadir una nueva parada haciendo clic en cualquier lugar entre los marcadores de parada existentes

Puedes usar el panel 'Paradas' para controlar el color y la posición de la parada seleccionada actualmente con más precisión.

El panel 'Vista previa' permite previsualizar el gradiente actual como vertical u horizontal, y también permite previsualizar rápidamente cómo se verá el gradiente de contingencia 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 en la herramienta.