CSS Gradient Generator — Two Colors, Live Preview
← Palette AtollThe Creative Island · Island 09
Two colors, one angle — live preview and ready-to-paste CSS.
How to use this tool
- Pick color A (start) and color B (end).
- Drag the angle slider — 0° points up, 90° points right, 135° is the classic top-left-to-bottom-right.
- When the preview feels right, Copy CSS.
Example
135° from #1d7d78 to #f7c548:
background: linear-gradient(135deg, #1d7d78, #f7c548); — the teal-to-gold wash used across this island's headings.The formula
background: linear-gradient(angle, colorA, colorB);
What the result means
The angle is the direction of travel: 0° starts at the bottom and moves up; 90° moves left→right; 180° top→bottom. Browser support is universal for two-color linear gradients — this is one of the safest decorative techniques on the web.
Frequently asked questions
Can I make three-color gradients?
Not with this tool — it is deliberately two-color, the case 90% of designs need. Copy the CSS and add a third stop by hand if you must.
What's the difference between 135deg and 'to bottom right'?
Nothing — they are two ways of saying the same direction. The degree form is easier to animate and tweak.
Do gradients slow down a page?
Two-color CSS gradients are drawn by the GPU and cost essentially nothing — unlike gradient images, which cost a download.
Is my color choice uploaded?
No — everything is generated in your browser.
More tools from Palette Atoll
Color Palette GeneratorHarmonies from one colorColor PickerHEX, RGB & HSL togetherContrast CheckerReadable color pairsHEX ↔ RGB ConverterConvert any color code
Explore the island world
- Palette Atoll — the island where this tool lives.
- The Main Island — drive the boat, explore the whole world.
- The 90s Kids Island — where most of us started.
Privacy & data: this tool runs entirely in your browser — nothing you type is uploaded, saved or sent anywhere. · Disclaimer: color values are computed with standard formulas; final appearance always depends on the display and medium. · Privacy Policy · Disclaimer
Comments
Post a Comment