Guide to the complete use of the Gradient Colour Card Generator
This page designs CSS gradients and extracts colour cards in the browser. Left Clickable #presetsGrid Preset, in
#colorStopsContainer Manage colour nodes (colour with 0-100% position, at least 2 kept), use
#gradientType Switch linear / radio / conic, with #angle (c) An angle of regulation (linear and cone effects).
#colorCount(2-12) Control of the number of sample colour cards from the gradient path.getCSS() /
updatePreview() Refresh in Real Time #gradientPreview and
#colorCards。 Can copy CSS copy colour arrays "Rastcast" "Down PNG" to change the theme to write localStorage。 Fits UI background and frontend code, not the full vector illustration editor.
Operational Recommendations
- Presets the quick starter, then fine-tuned the color and location percentage.
- (a) Priority linear gradients for background/buttons; (b) The routing of the photo effect; The palette is conical.
- Draws the number when you want a palette, click the colour card to copy HEX, or export JSON arrays to the library.
- Copy CSS.
background: … statement, paste the style sheet.
- Download Pictures Export 1200 x 630 PNG, which allows for cover or social image base colours (linear drawing by nodes).
Capacity boundaries
- The transition may be dirty when the nodes are too small; May be medium coloured or replaced with a similar color.
- (a) A path preview as a simple curcle; Complex ellipses/multicentres require handwritten CSS.
- PNG is exported as a linear gradient canvas that may not be fully consistent with the cone/reverse preview.
- The random colour may be too colourful, and the official brands are requested to be manually contrasted and accessible.
- All local calculations, unpublished; Public computers pay attention to the clipboard contents.
Preset, node and real-time preview
Multiple presets (e.g. sunset, ocean, aurora, etc.) are placed on the page and click to write
colorStops , and sync the type and angle, and then call
updatePreview()。 Each node contains a colour selection and position slider; Drag or recolor the position immediately reflects the right preview. When adding node, insert it in the middle colour and delete it with only two ends. Preview Area
#gradientPreview Just turn it on.
getCSS() And the result is...
style.background, so the effects you see are consistent with the CSS that you copied (except for PNG export, see below).
Export to Theme
- Copy CSS：Output
background: linear-gradient(...); row, to paste to a class or inline style.
- Copy colour arrays: Generate JSON string arrays at the current extraction number, which allows theme configuration or chart series colouring.
- Downloads PNG: Canvas 1200x630 and triggers the download by linear gradient in nodes order.
- Switch theme: Switch between bright/dark, prefer to write localStorage, and keep it as much as possible after refreshing.
- Random generation: two or more HEXs and angles at random, quickly tested and artificially constricted when the inspiration is exhausted.
FAQ
Copyed CSS. Can you use it directly?
Yes. Linear-gradient / Racial-gradient / conic-gradient, in the format of modern browser-supported Use the background. If the project is to be compatible with an old browser, add prefix or downgrade to pure colour.
How do you calculate the color card?
Linear inter-point inter-plug RGB by location, with HEX being evenly sampled on 0-100 per cent paths; Click on the colour card to copy. Number by
#colorCount Control, default 5, max 12.
Why can't we just delete one node?
Gradients require at least two end points;removeStop Only 2 left will refuse to delete, avoiding the creation of illegal CSS.
Does the angle work on the direction?
The path preview uses a simplified version radial-gradient(circle, …), the angle slider primarily influences linearity and cone; Check the preview confirmation after switching the type.
Use scene examples
The page's first screen background, button hover state, App Start page, data screen main colour, social media cover bottom, e-mail header bottom colour, etc. can be finalized and exported on this page. (a) Designed for review, to be pre-screened; Develop a CSS or colour array to develop a docking to reduce the return of "design colours that are not in line with code".
Related tools
Art of Gradual Colour Design: How to raise the visual depth of the web page?
In modern UI design, the gradient is not just a change in colour, but a way to create a sense of space, direct focus and convey brand emotions. Use this book
Online Gradient Card Generator
, you can quickly try to colour, pick the colour card and get the results to CSS.
1. Why is the Gradual Color so popular in design?
Compared to pure colour, the change is closer to natural light. The rational use of the web page allows:
- Increased modernity:Linear or radial gradients increase the page's fashion sense.
- Create visual level:The context and prospects of a clear and dark transition are distinguished.
- Sending brand tone:Soft and light-colored, professional, saturated and contrasting dynamic.
Addressing the “dirty” problem
It's often because of the color of the color. Could add an intermediate node, or use this page
Colour Scheme Extract
View the transition colour on the path and select a more visible colour.
3. How to select linear, directional and conical
- Linear:Background, button, navigation, clear sense of direction.
- Path:Simulation of light sources, highlighting central content.
- Cone:Colour palette, pie or artistic background.
4. From design to code
More breakpoint handwritten CSS is easily misperformed. This tool generates standard background codes; Colour array suitable for Canvas, ECharts .
5. Design recommendations: less or more
The main reason for this is that the CTA is a very powerful medium for the CTA and the primary screen owner. The large background should be low saturated and small-angle, avoiding visual fatigue.