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
The introduction of theme.json has been a significant advancement in enhancing the customization capabilities of WordPress. This feature lets designers and developers incorporate custom gradients into editor.
The following code snippet demonstrates how to add a custom gradient named “Tiffany to Royal,” offering a seamless way to enrich the visual aesthetics of WordPress block themes.
{
"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
Author, Author Biography, Author Name, Button, Code, Column, Columns, Comment Author Name, Comment Content, Comment Date, Comment Edit Link, Comment Reply Link, Comments, Comments Count, Comments Form, Comments Next Page, Comments Page Numbers, Comments Pagination, Comments Previous Page, Comments Title, Date, Excerpt, File, Gallery, Group, Heading, Latest Posts, List, Media & Text, Next Page, No results, Page Numbers, Pagination, Paragraph, Post Template, Post Terms, Preformatted, Previous Page, Pullquote, Query Title, Quote, Read More, Search, Separator, Site Tagline, Site Title, Social Icons, Table, Table of Contents, Title, Verse. (source)
