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

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

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)