Back to UI design
CSS gradient generator: linear, radial and conic
Pick a gradient type, change each stop's colour and position, add up to 5 colours or start from a preset. Copy the background code into your site.
How to use
- Choose a gradient type: linear, radial or conic.
- Change the colour and drag the position of each stop. Add up to 5 colours or pick a preset.
- Copy the code and paste it into the background property of the block you want to fill.
Frequently asked questions
How do I use a gradient in WordPress?
Group and Button blocks have a built-in gradient option. To use this exact code, paste it into Additional CSS.
Do gradients slow the page down?
No. A gradient is drawn by CSS and is much lighter than a background image.
Why does my gradient turn grey in the middle?
Colours opposite each other on the colour wheel turn grey when mixed. Add a brighter middle stop to fix it.