(cache)Gradient with mask 🌅 • Playground • Svelte

Skip to main content

App.svelte

<div id="tizio">

</div>

<style>

#tizio {

width: 80vw;

height: 60vh;

background: linear-gradient(0deg, red, blue);

mask-image: repeating-linear-gradient(

0deg,

transparent,

transparent 20px,

black 20px,

black 40px

);

}

</style>

import "svelte/internal/disclose-version";

import "svelte/internal/flags/legacy";

import * as $ from "svelte/internal/client";

var root = $.template(`<div id="tizio" class="svelte-n3pbk0"></div>`);

export default function App($$anchor) {

var div = root();

$.append($$anchor, div);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

#tizio.svelte-n3pbk0 {

width: 80vw;

height: 60vh;

background: linear-gradient(0deg, red, blue);

mask-image: repeating-linear-gradient(

0deg,

transparent,

transparent 20px,

black 20px,

black 40px

);

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 25
end: 259
attributes: []
children: [...] (1)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 34
end: 40
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 34
end: 40
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  IdSelector {...}
 type: "IdSelector"
name: "tizio"
start: 34
end: 40
 }
 ]
start: 34
end: 40
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 41
end: 250
children: [...] (4)
  Declaration {...}
 type: "Declaration"
start: 45
end: 56
property: "width"
value: "80vw"
 }
 Declaration {...}
 type: "Declaration"
start: 60
end: 72
property: "height"
value: "60vh"
 }
 Declaration {...}
 type: "Declaration"
start: 76
end: 120
property: "background"
value: "linear-gradient(0deg, red, blue)"
 }
 Declaration {...}
 type: "Declaration"
start: 124
end: 246
property: "mask-image"
value: "repeating-linear-gradient(\n    0deg,\n    transparent,\n    transparent 20px,\n    black 20px,\n    black 40px\n  )"
 }
 ]
 }
start: 34
end: 250
 }
 ]
content:  {...}
 start: 32
end: 251
styles: "\n\t#tizio {\n\t\twidth: 80vw;\n\t\theight: 60vh;\n\t\tbackground: linear-gradient(0deg, red, blue);\n\t\tmask-image: repeating-linear-gradient(\n    0deg,\n    transparent,\n    transparent 20px,\n    black 20px,\n    black 40px\n  );\n\t}\n"
comment: null
 }
 }
js: []
start: 0
end: 23
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  RegularElement {...}
 type: "RegularElement"
start: 0
end: 23
name: "div"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 5
end: 15
name: "id"
value: [...] (1)
  Text {...}
 start: 9
end: 14
type: "Text"
raw: "tizio"
data: "tizio"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: "svelte-n3pbk0"
raw: "svelte-n3pbk0"
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 16
end: 17
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 23
end: 25
raw: "\n\n"
data: "\n\n"
 }
 ]
 }
options: null
 }

The AST is not public API and may change at any point in time

modern