Default Gradients in the WordPress Block Editor

Brian Gardner Avatar


WordPress Default Gradients

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:

linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)

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

linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)

Luminous Vivd 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

linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)

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

linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)

Blush Bordeaux

linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)

Luminous Dusk

linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)

Pale Ocean

linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)

Electric Grass

linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)


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

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)