Color Picker & CSS Gradient Generator

background: #ff5733;

🔗 Related Tools

What is a Color Picker?

A color picker lets you choose a color by clicking on a spectrum instead of guessing a code. You click a spot, and the tool tells you the code for that color in the formats that websites and design tools use: HEX, RGB and HSL. You can also type a HEX code to see how it looks.

What is a CSS Gradient Generator?

A CSS gradient is a smooth blend between two or more colors, written as code instead of an image. Because it is just CSS, it loads fast, stays sharp at any size and can be changed in a line. A gradient generator lets you set the colors, the direction and the type visually, and then gives you the CSS to copy, so you do not have to write or guess the syntax.

How to Use the Color Picker (Solid Color Tab)

1. Open the Solid Color tab.
2. Click anywhere on the color spectrum to choose a color, or type a HEX code in the input box.
3. Check the live preview to see the color.
4. Click Copy next to HEX, RGB or HSL, depending on what your project uses.

How to Create a CSS Gradient (Gradient Tab)

1. Open the Gradient tab and choose Linear or Radial.
2. Set the colors. You need at least two, and you can add more color stops.
3. For a linear gradient, move the angle slider to set the direction in degrees.
4. Check the live preview box. It updates as you change anything.
5. Click Copy in the CSS code box and paste the code into your stylesheet.

What You See on the Page

Item	Meaning
Color spectrum	A clickable area for choosing a color visually
HEX input	A box where you can type a color code by hand
HEX, RGB and HSL boxes	The same color written in three formats, each with a Copy button
Color stops	The colors that make up a gradient (at least two)
Angle slider	The direction of a linear gradient, in degrees
Live preview box	Shows the selected color or gradient as a background
CSS code box	Ready-made CSS for the current color or gradient, with a Copy button

HEX vs RGB vs HSL

Format	Example	How it works	Best for
HEX	#FF5733	Six digits in base 16: red, green and blue pairs	Quick copy from design tools
RGB	rgb(255, 87, 51)	Red, green and blue, each from 0 to 255	JavaScript and many CSS properties
HSL	hsl(11, 100%, 60%)	Hue (0 to 360), saturation and lightness in percent	Making a color lighter, darker or softer by hand

All three describe the same color, and browsers show them identically. HSL values are rounded to whole numbers.

Linear vs Radial Gradient

Type	How it blends	Direction control	Typical use
Linear	Along a straight line	Angle in degrees	Page backgrounds, buttons, banners
Radial	Outward from a center point, like a circle or oval	No angle, it spreads from the center	Spotlight effects, glows, round highlights

Gradient Angle Guide

For a linear gradient, the angle decides where the first color starts and where the last color ends.

Angle	Direction
0deg	Bottom to top
45deg	Bottom left to top right
90deg	Left to right
135deg	Top left to bottom right
180deg	Top to bottom
225deg	Top right to bottom left
270deg	Right to left
315deg	Bottom right to top left

Color Stops Explained

A color stop is a color placed at a point along the gradient, written as a percentage from 0% (the start) to 100% (the end). A gradient needs at least two stops. With more stops, the gradient passes through more colors.

/* two stops */
background: linear-gradient(90deg, #ff5733 0%, #3366ff 100%);

/* three stops */
background: linear-gradient(90deg, #ff5733 0%, #ffc300 50%, #3366ff 100%);

If two stops share the same position, the colors change sharply instead of blending, which gives a striped look.

/* sharp split, no blend */
background: linear-gradient(90deg, #ff5733 50%, #3366ff 50%);

CSS Gradient Examples

Style	CSS
Left to right	linear-gradient(90deg, #ff5733, #3366ff)
Diagonal	linear-gradient(135deg, #667eea, #764ba2)
Top to bottom	linear-gradient(180deg, #ffffff, #cfd8dc)
Three colors	linear-gradient(90deg, #ff5733, #ffc300, #3366ff)
Circle from the center	radial-gradient(circle, #ffffff, #3366ff)

Paste any of these after background:, for example background: linear-gradient(135deg, #667eea, #764ba2);

How to Use the Generated CSS in Your Project

The CSS box gives you a background line. Place it inside a rule for the element you want to style.

.hero {
  background-color: #667eea; /* fallback for very old browsers */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
}

• The plain background-color line is a fallback that older browsers use if they cannot read the gradient.
• Linear and radial gradients work in all current major browsers without special prefixes.
• You can also use the same line on a button, a card, a header or the whole page body.

Tips for Better Gradients

• Start with two colors that are close in hue. Neighbouring colors, such as blue and purple, usually blend smoothly.
• Be careful with opposite colors. Some pairs, such as red and green, can turn muddy and grey in the middle. Adding a third color between them can help.
• Use a gentle angle. 135deg and 180deg are popular because they feel natural on screens.
• Keep it simple. Two or three stops are enough for most designs.
• Use HSL to adjust a color by hand. Keep the same hue and change only the lightness to get a matching lighter or darker color.
• Test on a phone. Colors can look different on different screens.

Color and Text Readability

If you place text on a gradient, check it against the lightest and the darkest part of the gradient, not only one color. Dark text works best on light areas and light text on dark areas. If the gradient goes from light to dark behind a line of text, add a solid or semi-solid area behind the text, or choose colors that stay close in brightness. Do not rely on color alone to carry meaning, and add text or icons for important information.

Common Mistakes

• Pasting the CSS outside a rule: The code must go inside curly braces of a selector, for example .hero { ... }.
• Only one color stop: A gradient needs at least two colors.
• Missing # in a HEX code: In CSS it must be #ff5733, not ff5733.
• Wrong HEX length: Valid HEX codes have 3 or 6 digits (and 4 or 8 when transparency is included).
• Expecting an angle on a radial gradient: Radial gradients spread from the center, so the angle slider is used for linear gradients.
• Poor text contrast: Text that is readable on one end of the gradient may be hard to read on the other.
• Using too many colors: Many stops can make the result look busy.

Privacy

• The tool runs in your browser, and the colors and gradients you create are not sent to our server.
• Nothing you build is shared. Copy the code you need before you leave the page.

Frequently Asked Questions

How do I pick a color and get its HEX code?

Open the Solid Color tab and click anywhere on the color spectrum. The HEX code appears in the box, and the same color is also shown as RGB and HSL. Click Copy next to the format you need. You can also type a HEX code by hand to see the color.

How do I create a CSS gradient?

Open the Gradient tab, choose Linear or Radial, and set at least two colors. For a linear gradient, set the angle with the slider. The preview box updates as you change anything, and the CSS code box below it holds the ready-made code. Click Copy and paste it into your stylesheet.

What is the difference between a linear and a radial gradient?

A linear gradient blends colors along a straight line, and the angle sets the direction. A radial gradient blends colors outward from a center point, like a circle or an oval. The angle slider is used for linear gradients only.

What do the angle values mean in a linear gradient?

The angle sets the direction of the color change. 0deg goes from bottom to top, 90deg from left to right, 180deg from top to bottom and 270deg from right to left. Angles in between, such as 45deg or 135deg, point diagonally.

What are color stops?

A color stop is a color placed at a point along the gradient. A gradient needs at least two stops, a start and an end. Adding more stops lets the gradient pass through more colors, for example from orange through pink to purple.

How do I use the generated CSS in my website?

Copy the code from the CSS box and paste it inside a rule for the element you want, for example a section or a button. It is a background declaration, so it goes inside the curly braces of a CSS rule. It is a good habit to add a plain background-color line before it as a fallback.

What is the difference between HEX, RGB and HSL?

They are three ways to write the same color. HEX is a short code such as #FF5733. RGB gives the amount of red, green and blue from 0 to 255, such as rgb(255, 87, 51). HSL gives hue, saturation and lightness, such as hsl(11, 100%, 60%), and is the easiest to adjust by hand.

Why does my HSL value change slightly when I convert back?

HSL values are shown as whole numbers, so a small amount of precision is lost. If you need the exact color, keep the original HEX or RGB value.

Do CSS gradients work in all browsers?

Linear and radial gradients work in all current major browsers, so you do not need special prefixes for modern projects. If you must support very old browsers, add a plain background-color as a fallback.

How do I make sure text is readable on a gradient?

Check the contrast of your text against the lightest and the darkest parts of the gradient, not only one color. Dark text on a light gradient or light text on a dark gradient works best. If the gradient changes from light to dark, consider adding a solid area behind the text.

Are my colors sent to a server?

No. The tool runs in your browser using JavaScript. The colors and gradients you create are not sent to our server.

Is this color picker and gradient generator free, and does it work on mobile?

Yes. The tool is free and needs no signup. It is designed for phone screens as well as desktop, and it supports dark mode.