{ "base": { "borderTopLeftRadius": 0, "borderTopRightRadius": 0, "borderBottomLeftRadius": 0, "borderBottomRightRadius": 0, "paddingTop": 10, "paddingRight": 10, "paddingBottom": 10, "paddingLeft": 20, "fontSize": 15, "fontFamily": "Alata", "boxshadow": { "inset": true, "pos": { "top": 26, "left": 25 }, "size": { "width": 20, "height": 20 }, "color": { "r": 255, "g": 255, "b": 255, "a": 0.47 } }, "background": { "colorA": { "r": 255, "g": 255, "b": 255, "a": 1 }, "colorB": { "r": 255, "g": 255, "b": 255, "a": 1 }, "angle": 0 }, "color": { "r": 0, "g": 0, "b": 0, "a": 1 }, "border": [ { "width": 2, "variant": "solid", "color": { "r": 0, "g": 0, "b": 0, "a": 1 } }, { "width": 2, "variant": "solid", "color": { "r": 0, "g": 0, "b": 0, "a": 1 } }, { "width": 2, "variant": "solid", "color": { "r": 0, "g": 0, "b": 0, "a": 1 } }, { "width": 2, "variant": "solid", "color": { "r": 0, "g": 0, "b": 0, "a": 1 } } ], "fontWeight": "normal", "filters": { "blur": { "active": 0, "val": [ 5 ] }, "brightness": { "active": 0, "val": [ 1 ] }, "grayscale": { "active": 0, "val": [ 0.5 ] }, "opacity": { "active": 0, "val": [ 0.5 ] }, "hueRotate": { "active": 0, "val": [ 0 ] } } }, "hover": { "borderTopLeftRadius": 0, "borderTopRightRadius": 0, "borderBottomLeftRadius": 0, "borderBottomRightRadius": 0, "paddingTop": 10, "paddingRight": 10, "paddingBottom": 10, "paddingLeft": 20, "fontSize": 15, "fontFamily": "Alata", "boxshadow": { "inset": false, "pos": { "top": 24, "left": 24 }, "size": { "width": 33, "height": 33 }, "color": { "r": 216, "g": 24, "b": 87, "a": 0 } }, "background": { "colorA": { "r": 255, "g": 255, "b": 255, "a": 1 }, "colorB": { "r": 255, "g": 255, "b": 255, "a": 1 }, "angle": 0 }, "color": { "r": 0, "g": 0, "b": 0, "a": 1 }, "border": [ { "width": 2, "variant": "solid", "color": { "r": 216, "g": 24, "b": 87, "a": 1 } }, { "width": 2, "variant": "solid", "color": { "r": 216, "g": 24, "b": 87, "a": 1 } }, { "width": 2, "variant": "solid", "color": { "r": 216, "g": 24, "b": 87, "a": 1 } }, { "width": 2, "variant": "solid", "color": { "r": 216, "g": 24, "b": 87, "a": 1 } } ], "fontWeight": "normal", "filters": { "blur": { "active": 0, "val": [ 5 ] }, "brightness": { "active": 0, "val": [ 1 ] }, "grayscale": { "active": 0, "val": [ 0.5 ] }, "opacity": { "active": 0, "val": [ 0.5 ] }, "hueRotate": { "active": 0, "val": [ 0 ] } } }, "focus": { "borderTopLeftRadius": 0, "borderTopRightRadius": 0, "borderBottomLeftRadius": 0, "borderBottomRightRadius": 0, "paddingTop": 10, "paddingRight": 10, "paddingBottom": 10, "paddingLeft": 20, "fontSize": 15, "fontFamily": "Alata", "boxshadow": { "inset": false, "pos": { "top": 26, "left": 25 }, "size": { "width": 28, "height": 28 }, "color": { "r": 216, "g": 24, "b": 87, "a": 0.81 } }, "background": { "colorA": { "r": 255, "g": 255, "b": 255, "a": 1 }, "colorB": { "r": 255, "g": 255, "b": 255, "a": 1 }, "angle": 0 }, "color": { "r": 0, "g": 0, "b": 0, "a": 1 }, "border": [ { "width": 4, "variant": "solid", "color": { "r": 216, "g": 24, "b": 87, "a": 1 } }, { "width": 4, "variant": "solid", "color": { "r": 216, "g": 24, "b": 87, "a": 1 } }, { "width": 4, "variant": "solid", "color": { "r": 216, "g": 24, "b": 87, "a": 1 } }, { "width": 4, "variant": "solid", "color": { "r": 216, "g": 24, "b": 87, "a": 1 } } ], "fontWeight": "normal", "filters": { "blur": { "active": 0, "val": [ 5 ] }, "brightness": { "active": 0, "val": [ 1 ] }, "grayscale": { "active": 0, "val": [ 0.5 ] }, "opacity": { "active": 0, "val": [ 0.5 ] }, "hueRotate": { "active": 0, "val": [ 0 ] } } } }

Input generator:

Templates

  • Preview
  • Code

Settings

  • Base
  • Hover
  • Focus
Border radius:
Padding:
Font:
Border:
Box shadow:
Filters:
Background: