Background Patterns, Simplified by Conic Gradients

Firefox now supports conical gradients! This article will show how to simplify background patterns using conical gradients.

Starting from Firefox 75, conical gradients can be enabled. The method is: access about:config , find the layout.css.conic-gradient.enabled flag, and set its value to true (the default value is false , double-click to switch). Once enabled, you can test CSS with conical gradients in Firefox.

Some examples in this article also work properly with polyfill, but some use CSS variables in conical gradients, so this feature needs to be natively supported.

A major advantage of conical gradient is its ability to simplify the background pattern. Let's look at some examples from the linear gradient pattern library created by Lea Verou decade ago and see how to simplify them with conical gradients.

Pyramid pattern

The original pattern uses four linear gradients:

 background:
  linear-gradient(315deg, transparent 75%, #d45d55 0) -10px 0,
  linear-gradient(45deg, transparent 75%, #d45d55 0) -10px 0,
  linear-gradient(135deg, #a7332b 50%, transparent 0) 0 0,
  linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0 0 #561a16;
background-size: 20px 20px;

The code is lengthy and difficult to understand. With a conical gradient, you can achieve the same effect with just one background layer:

 $s: 20px;
background:
  conic-gradient(from 45deg, 
    #561a16 25%, 
    #6a201b 0% 50%, 
    #a7332b 0% 75%, 
    #d45d55 0%) 
    50%/ #{$s $s};

The code is more concise and the volume is reduced from 260 bytes to 103 bytes, which is more than half.

Chess board pattern

The original pattern uses two linear gradients:

 background-color: #eee;
background-image:
  linear-gradient(45deg, black 25%, transparent 25%, 
    transparent 75%, black 75%, black),
  linear-gradient(45deg, black 25%, transparent 25%, 
    transparent 75%, black 75%, black);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;

After simplifying with conical gradient:

 $s: 60px;
background:
  repeating-conic-gradient(#000 0% 25%, #eee 0% 50%) 
    50%/ #{$s $s};

The code volume has been reduced from 263 bytes to 73 bytes, a reduction of more than 70%.

Diagonal chess board pattern

The original pattern also uses two linear gradients:

 background-color: #eee;
background-image: 
  linear-gradient(45deg, black 25%, transparent 25%, 
    transparent 75%, black 75%, black),
  linear-gradient(-45deg, black 25%, transparent 25%, 
    transparent 75%, black 75%, black);
background-size: 60px 60px;

After simplifying with conical gradient:

 $s: 60px;
background:
  repeating-conic-gradient(from 45deg, 
    #000 0% 25%, #eee 0% 50%) 
  50%/ #{$s $s};

The code volume decreased from 229 bytes to 83 bytes, a decrease of nearly two-thirds.

Half diamond pattern

The original pattern uses four linear gradients: (The original code and detailed explanation are omitted here, and the core conclusions are preserved)

After simplification with cone gradient, the code volume is reduced from 343 bytes to 157 bytes.

Additional example: Intersecting line background

Conical gradients can also easily achieve the effects that were originally required to achieve by multiple linear gradients. (Detailed explanation is omitted here, and the core conclusions are retained)

In summary, conical gradients can significantly simplify the CSS code of background patterns, improving code readability and efficiency.

The above is the detailed content of Background Patterns, Simplified by Conic Gradients. For more information, please follow other related articles on the PHP Chinese website!