Градиент цвета css генератор

CSS Gradient Generator

CSS Gradient Generator is a free online tool for generating CSS gradients. CSS gradient is a commonly used background type which contains two or more colors which have a color distribution that changes gradually. They are widely used as backgrounds in webpages to provide a fancy effect on design and attract users. If you think that solid backgrounds are boring for your user interface and looking for a lite weight solution, CSS backgrounds is one of the best solutions for this purpose. Image backgrounds has page loading costs and they increase the time needed to load a page. Gradients are a perfect solution if you have concerns on page loading time.

You must be careful when choosing the colors as they have to complete each other. If you need inspiration for colors, you can either use presets or shuffle colors with the button to get random gradients. You can pick if you like any of them and get the code easily.

You can generate CSS gradients manually by using up to 3 colors by your own or you may use preset gradients by choosing from the list. There are 2 main gradient type in CSS, one is linear, and one is radial. It identifies the distribution axis of the colors. Here is a basic comparison between linear and radial gradient.

How to use Online CSS Gradient Generator?

You can create your own CSS gradients by following these steps.

1. First, set the colors you want to use in your gradient. 2 colors are enabled as default. You can enable 3rd color by checking the «Use 3rd color» checkbox.
2. Select the direction of the gradient. You can either choose linear and radial. If you have selected linear, you must send angle of the gradient.
3. If you want to use a preset gradient, you can select from the list, and it automatically set colors for you.
4. You can copy the CSS code for gradient either manually or by clicking «Copy CSS» button.

Источник

Ultimate CSS Gradient Generator

A powerful Photoshop-like CSS gradient editor from ColorZilla.

Enter existing gradient CSS to import

Import from an image-based gradient

Browser compatibility

Support using old -webkit- syntax
Browser usage: less than 0.1%
Select «Maximize compatibility» to support

IE9 support (?) Maximize compatibility

What’s new

• » 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 Compassmixins (needs latest beta of Compass)
• » Copy to clipboard button for quickly grabbing the generated code
• » Easy resizing of preview panel by dragging its corner

Previous versions

• » 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
  • » New ‘Adjustments’ panel — tweak your gradient or create new flavors
    • · Adjust hue, saturation and lightness
    • · Reverse current gradient
    • » 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

          About

          The Ultimate CSS Gradient Editor was created by Alex Sirota (iosart). If you like this tool, check out ColorZilla for more advanced tools such as eyedroppers, color pickers, palette editors and website analyzers.

          As you might know, HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects.

          Important: You’ll need a recent version of Firefox, Chrome, Safari, Opera or IE to use this Gradient Generator. The resulting CSS gradients are cross-browser — they will work in these browsers and will also fall back to a simpler gradient in older versions of Internet Explorer.

          Features

          • Powerful Photoshop-like interface
          • Cross browser CSS output
          • Horizontal, vertical, diagonal and radial gradients
          • Complex multi-stop gradients
          • Opacity support with multiple opacity stops
          • Hex, rgb, rgba, hsl, hsla color formats
          • Support for full multi-stop gradients with IE9
          • Import from image (convert image gradient to CSS)
          • Import from existing CSS
          • Adjust gradient by hue, saturation, lightness
          • More than 135 gradient presets
          • Saving custom gradient presets
          • Sass output
          • Flexible preview panel
          • Gradient permalinks for sending and sharing
          • More soon!

          Help

          • » Adjust the gradient stop position by dragging the stop marker
          • » Adjust the stop color by double clicking on the stop marker
          • » Delete a stop by draggin the stop marker up or down
          • » Add a new stop by clicking anywhere in between the existing stop markers

          The ‘Preview’ panel allows previewing the current gradient as a vertical or horizontal one, and also allows quickly previewing how the Internet Explorer fallback gradient will look in IE.

          Finally, the ‘CSS’ panel always has the CSS for the current gradient for easy copying and pasting into your stylesheet. You can also use this panel to import an existing gradient CSS into the tool.

          Credits

          The ‘Ultimate Web 2.0 Gradients’ preset gradients were derived from work by deziner folio and SGlider12.

          The Color Picker is a minor adaptation of John Dyer’s Color Picker.

          The Base-64 encoder function is from webtoolkit.

          Tags: CSS Gradient Editor, CSS Gradient Generator, HTML5 Gradient Generator, CSS3 Gradient Generator, CSS Gradient Maker, CSS Gradient Creator, Linear Gradients, Radial Gradients, IE6, IE7, IE8, IE9, IE10, SVG Gradients, ColorZilla

          Источник

          CSS gradient генератор

          Времена, когда сделать градиент на сайте можно было только с использованием картинок давно прошли. Теперь достаточно просто создавать градиенты внутри CSS стилей.

          Для того, чтобы задать градиент используется свойство background-image или сокращенный вариант background-image . И мы можем создать как линейный так и радиальный градиент, прописав значения либо linear-gradient, либо radial-gradient и указав начальный и конечный цвета. Вот пример синтаксиса:

          Поменять направление возможно, указав его вначале, перед первым цветом.

          Если заменить этот параметр на to top right вы получите диагональный градиент. Такой же эффект можно создать, указав параметр в градусах, например, 45deg .

          Вы можете использовать больше чем 2 цвета, и цвета можно записать в том числе и по названию.

          Каждый из четырех цветов будет занимать равное количество доступного пространства, что даст нам гладкий и сбалансированный градиент.

          Если мы хотим, чтобы один цвет занимал больше места, чем другой, можно добавить значение в процентах непосредственно после цвета. Потренируйтесь на градиент css генераторе выше.

          Радиальный градиент

          Используем все, что мы уже узнали ранее, чтобы создать радиальный градиент. На самом деле это довольно просто, достаточно в начале указать значение radial-gradient .

          Такой радиальный градиент принимает форму родительского блока, поэтому вместо круга мы получили эллипс. Чтобы градиент был в форме круга независимо от пропорций родителя, необходимо указать ключевое слово circle .

          К тому же мы можем указать где будет центр радиального градиента. Давайте сделаем так, чтобы он был в левом верхнем углу:

          Практическое использование CSS градиента

          Давайте попробуем использовать градиент более оригинальным способом.

          Градиент поверх картинки

          Ниже вы видите пример слоя с градиентом поверх изображения. Здесь мы использовали полупрозрачные rgba цвета.

          Свойство background может принимать сразу несколько значений. При этом первое будет верхним слоем, а последнее — нижним.

           CSS div { background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)), url('gradient.jpg'); } 

          Градиент в тексте

          Градиент в тексте — это классный эффект, хотя и не полностью поддерживаемый в чистом виде. Вместо него мы используем свойство background-clip , это что-то вроде хака, но отлично работающего хака.

          Возьмем элемент, в данном случае h1, и применим к нему градиент. Свойству background-clip присвоим значение text, это удалит фон из всего блока, за исключением текста. И, конечно же, следует сделать свойство color прозрачным, иначе мы не увидим градиент.

           CSS div { background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6); -webkit-background-clip: text; background-clip: text; color: transparent; } 

          • Студия Профессиональная разработка сайтов под заказ Подробнее
          • Иконки Прекрасный способ визуально выразить главную мысль Подробнее
          • Сервисы Полезные инструменты для веб разработчиков Подробнее
          • Блог Делимся в опытом и знанием в IT сфере Подробнее
          • Поделиться ВконтактеFacebook Контакты support@active-vision.ru

          © 2019 — 2023 Active-Vision. Политика конфиденциальности. Вся информация на сайте носит справочный характер и не является публичной офертой, определяемой статьей 437 ГК РФ

          Источник