Gradients provide a stylish and colorful option for any website. With the WordPress Block Editor, you can choose from many gradient presets or create your own theme-specific gradients by overwriting the defaults provided with a gradient pattern generated to match your design.
Carolina Nymark inspired this article and has a wonderful overview of gradients in the theme.json color options lesson at Full Site Editing.
Default Gradients in Block Editor
Here’s a list of default gradients that are available in the Block Editor:
Vivid Cyan Blue to Vivid Purple:
–wp–preset–gradient–vivid-cyan-blue-to-vivid-purple:
linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)
Light Green Cyan to Vivid Green Cyan
–wp–preset–gradient–light-green-cyan-to-vivid-green-cyan
linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)
Luminous Vivid Amber to Luminous Vivid Orange
–wp–preset–gradient–luminous-vivid-amber-to-luminous-vivid-orange
linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)
Luminous Vivd Orange to Vivid Red
–wp–preset–gradient–luminous-vivid-orange-to-vivid-red
linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)
Very Light Gray to Cyan Bluish Gray
–wp–preset–gradient–very-light-gray-to-cyan-bluish-gray
linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)
Cool to Warm Spectrum
–wp–preset–gradient–cool-to-warm-spectrum
linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)
Blush Light Purple
–wp–preset–gradient–blush-light-purple
linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)
Blush Bordeaux
–wp–preset–gradient–blush-bordeaux
linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)
Luminous Dusk
–wp–preset–gradient–vivid-cyan-blue-to-vivid-purple:
linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)
Pale Ocean
—wp–preset–gradient–pale-ocean
linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)
Electric Grass
–wp–preset–gradient–electric-grass
linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)
Midnight
–wp–preset–gradient–midnight
linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)
Add Custom Gradient via Theme.json
With the introduction of theme.json in WordPress 5.8, designers and developers can allow custom gradients in the Block Editor. Below is the code required to add a gradient called Tiffany to Royal.
{
"version": 2,
"settings": {
"color": {
"customGradient": true,
"gradients": [
{
"name": "Tiffany to Royal",
"slug": "tiffany-royal",
"gradient": "linear-gradient(135deg,rgb(14,202,212) 0%,rgb(126,92,239) 100%)"
}
],
}
}
}
Code language: JSON / JSON with Comments (json)Tiffany to Royal
–wp–preset–tiffany-to-royal
linear-gradient(135deg,rgb(14,202,212) 0%,rgb(126,92,239) 100%)
Blocks That Include Gradient Backgrounds
Button, column, columns, group, list, media & text, post author, post comments count, post comments form, post comments, post date, post excerpt, post terms, post title, preformatted, pullquote, next and previous pagination, archive title, post list (query), search form button, site tagline, site title, table, template part, and verse. (source)
