How to work with gradients in CSS / list of online CSS gradient generators [closed]

Tags: html,css,color-scheme

Problem :

I have CSS code for a gradient which is the following:

background: #0345A9; /* Old browsers */
background: -moz-linear-gradient(top, #0345A9 0%, #032E8F 44%, #001A6E 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0345A9), color-stop(44%,#032E8F), color-stop(100%,#001A6E)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* IE10+ */
background: linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0345A9', endColorstr='#001A6E',GradientType=0 ); /* IE6-9 */

Which generates a blue color family gradient.

My question is: What if I want get the counterpart of the blue to lets say green or red. What is the best way to do that? I tried to use color picker but it comes out totally different.

Is there a website that does it for you?

Solution :

There are various websites out there, that help you with generating CSS gradients via a easy user interfaces and output the resulting CSS code, e.g.:

[*] (import of existing CSS code possible)

[#] (import of existing image with gradient possible)

Regrading the CSS import feature: Usually, you only have to enter one single browser-specific CSS gradient command. Be aware however, that not all websites/generators can handle all browser formats (Mozilla vs. Webkit vs. Opera vs. W3C vs. IE).

    CSS Howto..

    How to position an element at the TOP LEFT corner of a page using CSS?

    How do I get a dropdown choice to show up on the left of an entry on this To-Do list?

    How to align form at the center of the page in html/css

    How to edit the css?

    show No-Overlay (transparent background) when using backdrop:“static” in bootstrap modal

    JavaFx: How to get the corresponding stylesheet for a given style class of a Node?

    How to vertically center dynamically 1 or 2 lines of text with CSS? [duplicate]

    How to set a menu hover delay

    CSS puzzle: How to add background-image and set height/width on empty span?

    Where and how to add/edit css in roots starter theme

    How to use Materialize css Tabs in Meteor?

    How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

    how to calculate css rules priority in Javascript?

    How do I style the membership control with css?

    How do I get a zooming effect on an image when a user hovers over it? [closed]

    Showing hidden divs element using jQuery show() not working in IE7

    How to output using digits only?

    How to get every line of text / elements of a page centered horizontally?

    How to make a HTML list appear horizontally instead of vertically using CSS only?

    How to make the main content div fill height of screen with css [duplicate]

    how to css for data attribute [duplicate]

    How to take a div that is off screen and translate it to the middle of the screen using translateX()

    creating a slide show for home page in my web site [closed]

    how to drag and drop css file in eclipse?

    How to make commandeButon to vertical align?

    How to make image clipping in css

    How to center text in the middle of the responsive circle, (text is responsive too)?[css/html only]

    How to position a div differently for a specific page?

    How to select a .list-cell, in javaFX CSS

    How to make the content div scrollable without using javascript